Grunt

• Grunt介绍

中文主页 : http://www.gruntjs.net
是一套前端 自动化构建 工具，一个基于nodeJs的命令行工具
它是一个 任务运行器 , 配合其丰富强大的插件
常用功能:
----------合并文件(js/css)
----------压缩文件(js/css)
----------语法检查(js)
----------less/sass预编译处理
----------其它...

• 安装nodejs, 查看版本

node -v

• 创建一个简单的应用grunt_test

|- build----------构建生成的文件所在的文件夹
    |- src------------源码文件夹 
        |- js---------------js源文件夹
        |- css--------------css源文件夹
|- index.html-----页面文件
|- Gruntfile.js---grunt配置文件(注意首字母大写)
|- package.json---项目包配置文件

• 全局安装 grunt-cli

cnpm install -g grunt-cli

• 安装grunt

cnpm install grunt --save-dev

• 配置文件: Gruntfile.js 此配置文件本质就是一个node函数类型模块 配置编码包含3步:

1. 初始化插件配置
2. 加载插件任务
3. 注册构建任务

基本编码:
module.exports = function(grunt){
    // 1\. 初始化插件配置
    grunt.initConfig({
         //主要编码处
    });
    // 2\. 加载插件任务
    // grunt.loadNpmTasks('grunt-contrib-concat');
    // 3\. 注册构建任务
    grunt.registerTask('default', []);
};

命令: grunt //提示成功, 但没有任何效果(还没有使用插件定义任务)

• Grunt插件介绍

grunt官网的插件列表页面 http://www.gruntjs.net/plugins
插件分类:
--------- grunt团队贡献的插件 : 插件名大都以contrib-开头
--------- 第三方提供的插件 : 大都不以contrib-开头
常用的插件:
--------- grunt-contrib-clean—— 清除文件(打包处理生成的)
--------- grunt-contrib-concat——合并多个文件的代码到一个文件中
--------- grunt-contrib-uglify——压缩js文件
--------- grunt-contrib-jshint——javascript语法错误检查
--------- grunt-contrib-cssmin——压缩/合并css文件
--------- grunt-contrib-htmlmin——压缩html文件
--------- grunt-contrib-imagemin——压缩图片文件(无损)
--------- grunt-contrib-copy—— 复制文件、文件夹
--------- grunt-contrib-requirejs**—— 合并压缩requirejs管理的所有js模块文件
--------- grunt-contrib-watch—— 实时监控文件变化、调用相应的任务重新执行

• 合并js: 使用concat插件

下载插件 cnpm install grunt-contrib-concat --save-dev

`1. 编码:`
//  src/js/test1.js
(function () {
    function add(num1, num2) {
        return num1 + num2;
    }
    console.log(add(10, 20));
})();

//  src/js/test2.js

(function () {
    var arr = [2,3,4].map(function (item, index) {
        return item+1;
    });
    console.log(arr);
})();

` 2. 配置: Gruntfile.js`

module.exports = function(grunt) {
    // 配置任务
    grunt.initConfig({
        //任务名
        concat: {
            //可选项配置
            options: {
                //使用;连接合并
                separator: ';',
            },
            dist: {
                //合并哪些js文件,也可以指定具体合并文件['src/1.js','src/2.js']
                src: ['src/js/*.js'],
                //输出地址
                dest: 'build/js/build.js'
            }
        }
    });
    // 加载包含 "concat" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
};

`3. 执行命令: grunt concat   //会在build下生成一个built.js`

• 压缩js: 使用uglify插件

下载插件 cnpm install grunt-contrib-uglify --save-dev
注意: 压缩任务执行的结果, 会将虽然声明过,但从没使用的函数/变量 剔除掉

` 1. 配置: Gruntfile.js`

module.exports = function(grunt) {
    // 配置任务
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build_min: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        }
    });
    // 加载包含 "uglify" 任务的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
};

`3. 执行命令: grunt uglify  会将build/js/build.js 压缩为 build/js/build.min.js`

• 默认任务: 注册任务队列 , 执行 grunt命令 , 自动 同步 执行队列任务

同步执行 就要注意一下,任务的顺序了, 仔细想想下一个任务依赖不依赖上一个任务的结果

module.exports = function(grunt) {
  // 配置任务
  grunt.initConfig({
   ............
  });
  // 加载插件。
  grunt.loadNpmTasks('........');
  // 加载包含 "concat" 任务的插件。
  //grunt.loadNpmTasks('grunt-contrib-concat');

  // 命令行执行 grunt  执行默认的任务列表。
  grunt.registerTask('default', ['concat','uglify']);

};

• js语法检查: 使用jshint插件

下载插件 cnpm install grunt-contrib-jshint --save-dev

` 1. 新建 .jshintrc文件`
{
  "curly": true,
  "eqeqeq": true,
  "eqnull": true,
  "expr" : true,
  "immed": true,
  "newcap": true,
  "noempty": true,
  "noarg": true,
  "regexp": true,
  "browser": true,
  "devel": true,
  "node": true,
  "boss": false,
  
  //不能使用未定义的变量
  "undef": true,
  //语句后面必须有分号
  "asi": false,
  //预定义不检查的全局变量 ,注:使用一些外部引入插件的变量,但是我们项目里没有这个变量,这里可以屏蔽掉错误
  "predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"] 
}
` 2.  Gruntfile.js`
//配置任务
jshint : {
  options: {
    jshintrc : '.jshintrc' //指定配置文件,在根目录可以不写路径
  },
  build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
}
//加载插件
grunt.loadNpmTasks('grunt-contrib-jshint');
//注册任务
grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
` 3. 执行 grunt 命名`

• CSS压缩&合并 使用 cssmin插件

下载插件 cnpm install grunt-contrib-cssmin --save-dev

` 1. 编码`
// src/css/1.css
#box1 {
  width: 100px;
  height: 100px;
  background: red;
}
// src/css/2.css
#box2 {
  width: 200px;
  height: 200px;
  background: blue;
}
// index.html
<link rel="stylesheet" href="build/css/output.min.css">
<div id="box1"></div>
<div id="box2"></div>

` 2. Gruntfile.js`
// 配置任务
cssmin:{
  options: {
    shorthandCompacting: false,
    roundingPrecision: -1
  },
  build: {
    files: {
        'build/css/build.min.css': ['src/css/*.css']
    }
  }
}
// 加载插件
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 注册任务
grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);

` 3. 执行命令`
grunt 

• 使用watch插件（真正实现自动化 ）

下载插件 cnpm install grunt-contrib-watch --save-dev

` 1. Gruntfile.js `
// 配置任务
watch : {
  scripts : {
    files : ['src/js/*.js', 'src/css/*.css'],
    tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
    //true:全量更新 不管更新的是什么 js css文件的任务全部更新一遍 false:变量更新 表示只更新当前文件类型的任务
    options : {spawn : false}  
  }
}

//加载插件
grunt.loadNpmTasks('grunt-contrib-watch');
//注册任务
grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']);
//执行命名 监控文件变化, 自动构建 
grunt

2. 改进
//开发完毕执行 grunt命令 生成项目 提交代码
grunt.registerTask('default', ['concat', 'uglify', 'jshint']); 
//开发的时候 使用 grunt myWatch , 实时监控 变化 ,自动构建项目
grunt.registerTask('myWatch', ['default','watch']);

• 使用Sass插件

下载插件 cnpm install grunt-contrib-sass --save-dev

` 1. 编码`
// src/test.scss
$baseWidth :50px;
$baseWidth :100px !default;

#box1{
    width: $baseWidth;
}
` 2 . Gruntfile.js`
// 配置任务
sass: {
    dist: {
        files: [{
            expand: true,
            cwd: 'src/css',
            src: ['*.scss'],
            dest: 'src/css',
            ext: '.css'
        }]
    }
}
//加载插件
grunt.loadNpmTasks('grunt-contrib-sass');
// 修改watch 监听任务顺序,将sass的任务处理 放在cssmin任务之前
watch : {
      scripts : {
        files : ['src/js/*.js', 'src/css/*.css','src/css/*.scss'],
        tasks : ['concat', 'jshint', 'uglify','sass', 'cssmin'],
        //true:全量更新 不管更新的是什么 js css文件的任务全部更新一遍 false:变量更新 表示只更新当前文件类型的任务
        options : {spawn : false}  
      }
}
//修改 registerTask的默认任务队列, 将sass的任务处理 放在cssmin任务之前
grunt.registerTask('default', ['concat','uglify','jshint','sass','cssmin']);
//执行监听
grunt myWatch