Grunt 笔记

前端工程化 634

Grunt 依赖 Node.js环境， 所以在安装之前确保你安装了 Node.js。

安装 Grunt-cli

Grunt-cli 是是一个命令行工具。 

npm install -g grunt-cli

package.json 文件

'package.json'是 Node.js 用来描述项目的一个文件，Json 格式。
 在终端中输入npm init，输入name等信息后，就能在当前目录下生成一个'package.json'文件，像这样： 

{
  "name": "myGrunt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

当然，也可以拷贝一份上述'package.json'文件到文件夹中。

安装 Grunt 插件

sudo npm install grunt --save-dev

其中--save-dev的作用是：省掉你手动修改package.json文件的步骤，自动把模块和版本号添加到devdependencies部分

安装完成后，你会发现 package.json文件中多了 devDependencies 的信息。 

{
  "name": "myGrunt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

grunt-contrib-uglify 插件

插件用途：压缩js,css文件 

sudo npm install grunt-contrib-uglify --save-dev

安装完成后，发现 devDependencies 中又多了一行 

"devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "^2.0.0"
  }

Gruntfile.js 文件

Grunt 有两个必备的文件，一个是 package.json ，另一个就是 Gruntfile.js。
 通过对 Gruntfile.js 文件的设置，我们可以告诉 Grunt 它应该做哪些事情。 

module.exports = function(grunt) {

    // 1. 所有的配置将在这里进行
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
   // 2. uglify插件的配置信息 
      uglify: {
        options: {
          banner: '/*! This is uglify test - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */',
          beautify: true,//是否压缩
          mangle: false, //不混淆变量名
          compress:true,//打开或关闭使用默认选项源压缩。
        },
        app_task: {
          files: {
            'build/app.min.js': ['lib/index.js', 'lib/test.js']
          }
        }
    }
  });
    // 3. 我们在这里告诉grunt我们将使用插件
        grunt.loadNpmTasks('grunt-contrib-uglify');

    // 4. 我们在这里告诉grunt当我们在终端中输入grunt时需要做些什么
    grunt.registerTask('default', ['uglify']);

};

说明：
 banner：在build/app.min.js 文件生成内容，比如日期什么的
 files：将 lib 目录中的 js 压缩合并生成到 build 目录中生成 app.min.js

运行grunt

准备就绪后就可以运行 Grunt 啦 

grunt

以上已经是一个完整的流程了，让我们再看看别的插件吧。

grunt-contrib-watch 插件

插件用途：监控文件变化并自动运行grunt 

sudo npm install grunt-contrib-watch --save-dev

使用时，要在 Gruntfile.js 中添加对应的代码 

 // watch插件的配置信息
    watch: {
        another: {
            files: ['lib/*.js'],
            tasks: ['uglify'],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }

再添加一行： 

grunt.loadNpmTasks('grunt-contrib-watch');

数组中添加 watch 

grunt.registerTask('default', ['uglify','watch']);

完整的 Gruntfile.js 文件如下： 

module.exports = function(grunt) {

    // 1. 所有的配置将在这里进行
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
    // 2. uglify插件的配置信息 
      uglify: {
        options: {
          banner: '/*! This is uglify test - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */',
          beautify: true,//是否压缩
          mangle: false, //不混淆变量名
          compress:true,//打开或关闭使用默认选项源压缩。
        },
        app_task: {
          files: {
            'build/app.min.js': ['lib/index.js', 'lib/test.js']
          }
        }
    },
      watch: {
        another: {
            files: ['lib/*.js'],
            tasks: ['uglify'],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
     }
  });
    // 3. 我们在这里告诉grunt我们将使用插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 4. 我们在这里告诉grunt当我们在终端中输入grunt时需要做些什么
    grunt.registerTask('default', ['uglify','watch']);

};
Comments
Write a Comment