使用grunt压缩,合并前端代码

柔光的暖阳◎ 2022-07-19 02:23 180阅读 0赞

# \-- 安装nodejs #

Windows下安装nodejs,[点击这里][Link 1],其他系统会安装软件,nodejs就会安装,nodejs安装还是很简单的.

# \-- 安装grunt #

使用npm全局安装,命令:

npm install -g grunt-cli

# \-- 测试压缩 #

## \-- npm init ##

npm init创建package.json文件

![Center][]

加入依赖的包.package.json内容

{
      "name": "demo1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "zwj",
      "license": "ISC",
      "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-jshint": "~0.10.0",
        "grunt-contrib-nodeunit": "~0.4.1",
        "grunt-contrib-uglify": "~0.5.0"
      }
    }

![Center 1][]

## \-- npm install ##

npm install下载所有的依赖包

## \-- gruntfile文件 ##

gruntfile.js

/*
    2016年8月9日11:32:30
    动态数据标签和ejs模板类似 <%= %>
     */
    module.exports = function(grunt) {
    
      grunt.initConfig({
      	//读取package.json文件信息
        pkg: grunt.file.readJSON('package.json'),
        
        //定义任务
        uglify: {
          options: {
          	//压缩后的文件注释信息
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          },
          build: {
          	//需要压缩的文件
            src: 'src/<%= pkg.name %>.js',
            //压缩后的文件
            dest: 'build/<%= pkg.name %>.min.js'
          }
        }
      });
    
      // 加载包含 "uglify" 任务的插件。
      grunt.loadNpmTasks('grunt-contrib-uglify');
    
      // 默认被执行的任务列表。
      grunt.registerTask('default', ['uglify']);
    
    };

## \-- 创建需要压缩的文件 ##

src文件夹下demo1.js,内容就复制 gruntfile.js这个文件里的内容.

一切就绪.

# \-- 运行 #

\-----运行前目录:

![Center 2][]

\-----运行:

![Center 3][]

\-----运行后:

![Center 4][]

自动创建了个build文件夹,并压缩生成了demo1.min.js文件

# \-- 测试合并 #

\-- 再在src下加入demo2.js,和demo3.js内容和demo1.js一样,然后合并这3个文件.

\-- 修改gruntfile.js文件

/*
    2016年8月9日11:32:30
    动态数据标签和ejs模板类似 <%= %>
     */
    module.exports = function(grunt) {
    
      grunt.initConfig({
      	//读取package.json文件信息
        pkg: grunt.file.readJSON('package.json'),
    
        //定义任务
        uglify: {
        	 options: {
          	//压缩后的文件注释信息
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          },
          "files": {
            "files": {
              'build/demos.min.js': ['src/demo1.js', 'src/demo2.js', 'src/demo3.js']
            }
          }
        }
      });
    
      // 加载包含 "uglify" 任务的插件。
      grunt.loadNpmTasks('grunt-contrib-uglify');
    
      // 默认被执行的任务列表。
      grunt.registerTask('default', ['uglify']);
    
    };

\------运行前:

![Center 5][]

\------运行后:

![Center 6][]  
**nodejs专栏:[点击这里][Link 2]**

**grunt插件列表:[点击这里][Link 3]**

[Link 1]: http://blog.csdn.net/zzwwjjdj1/article/details/51980082
[Center]: /images/20220718/11b237be16b0479190bec0c0e1b7a94e.png
[Center 1]: /images/20220718/44fbd99d6ec645fc95c5905e08019eb3.png
[Center 2]: /images/20220718/4798a99917974f7392abbd7cae648b93.png
[Center 3]: /images/20220718/cf0290d9feb3453ba84f0326f652ef6c.png
[Center 4]: /images/20220718/f77d01ae38f349d586d7028eccb43506.png
[Center 5]: /images/20220718/db2957a918fc41efae2c5a8d7e05fa47.png
[Center 6]: /images/20220718/df959043bf794d28a729d6eb749a99e8.png
[Link 2]: http://blog.csdn.net/column/details/wnodejs.html
[Link 3]: http://www.gruntjs.net/plugins