grunt -- javascript自动化工具-前端-E先生的博客

grunt 是一个基于npm,node.js 用js编写的工具框架,可以自动完成一些重复性的任务(如合并文件,语法检查,压缩代码),

grunt拥有庞大的插件库,可以满足各种自动化批处理需求,常用的插件有:

concat ---> 合并文件

csslint ---> css语法检查

cssmin ---> css压缩

jshint ---> js语法检查

uglify ---> js压缩

watch ---> 自动化核心,监视文件修改并执行插件

autoprefixer ---> css浏览器前缀补全

node.js,grunt和grunt-cli 的安装略.

插件安装指令:

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-csslint --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-autoprefixer --save-dev

npm package.json 安装完插件后的配置

{
  "name": "grunt_test",
  "version": "1.0.1",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-csslint": "^2.0.0",
    "grunt-contrib-cssmin": "^1.0.2",
    "grunt-contrib-jshint": "^1.0.0",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0"
  }
}

[重中之重] 创建 Gruntfile.js grunt配置文件代码如下：与src同级

//包装函数
module.exports=function (grunt) {
    //任务配置,所有插件的配置信息
    grunt.initConfig({
        //获取 package.json 的信息
        pkg:grunt.file.readJSON('package.json'),
        //js压缩
        uglify: {
            options: {
              //头部注释
              banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %> */',
              //生成sourceMap
              sourceMap: true
            },
            my_target: {
                 files: [
                     {
                         expand: true,
                         //源文件相对路径
                         cwd: 'src/',
                         //选择文件
                         src: ['*.js','!*.min.js'],
                         //目标文件输出目录
                         dest: 'dest/',
                         //后缀
                         ext: '.min.js'
                     }
                 ]
            }
        },
        //js语法检查
        jshint: {
            options:{
                jshintrc:'.jshintrc'
            }, 
            my_target: ['src/*.js'],
        },
        //css压缩
        cssmin:{             
             options: {
                  //文件头部输出信息
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
                 //美化代码
                 beautify: {
                     //中文ascii化，非常有用,防止中文乱码
                     ascii_only: true
                 }
             },
             my_target: {
                 files: [
                     {
                         expand: true,
                         //源文件相对路径
                         cwd: 'src/',
                         //选择文件
                         src: ['*.css','!*.min.css'],
                         //目标文件输出目录
                         dest: 'dest/',
                         //后缀
                         ext: '.min.css'
                     }
                 ]
             }
         },
        //css语法检查
        csslint:{
            options:{
                csslintrc:'.csslintrc'
            },
            build:['src/*.css']
        },
        //自动化
        watch:{
            test1:{
                tasks:['jshint','uglify'],
                options:{spawn:false}
            },
            test2:{
                tasks:['csslint','cssmin'],
                options:{spawn:false}
            }
        },
        //合并文件
        concat: {
            options: {
              separator: ';\n',
              stripBanners: true,
              banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            dist: {
                src: ['src/*.js'],
                dest: 'dest/basic.js',
            },
        },
    
        //css浏览器前缀补全
        autoprefixer: {
            options: {
                browsers: ['Chrome < 50', 'ie > 8' ,'ff < 20','opera < 39']
            },
            your_target: {
                 files: [
                     {
                         expand: true,
                         //源文件相对路径
                         cwd: 'src/',
                         //选择文件
                         src: ['*.css','!*.min.css'],
                         //目标文件输出目录
                         dest: 'dest/',
                         //后缀
                         ext: '.fix.css'
                     }
                 ]
            },
        },
    });
    //告诉grunt我们将要使用的插件
    grunt.loadNpmTasks('grunt-contrib-concat');//合并代码
    grunt.loadNpmTasks('grunt-contrib-jshint');//js语法检查
    grunt.loadNpmTasks('grunt-contrib-csslint');//css语法检查
    grunt.loadNpmTasks('grunt-contrib-cssmin');//css压缩
    grunt.loadNpmTasks('grunt-contrib-uglify');//js压缩
    grunt.loadNpmTasks('grunt-contrib-watch');//自动化核心,监视文件修改并执行插件
    grunt.loadNpmTasks('grunt-autoprefixer');//css浏览器前缀补全
    //告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序)
    grunt.registerTask('cont',['concat']);
    grunt.registerTask('afix',['autoprefixer']);
    grunt.registerTask('mcss',['cssmin']);
    grunt.registerTask('mjs',['uglify']);
    grunt.registerTask('default',['jshint','uglify','watch']);
}

1,js,css压缩配置中,都是多个文件单独压缩生成多个对应文件名的.min.js或.min.css,并生成对应的sourceMap

2,autoprefixer配置中browsers: ['Chrome < 50', 'ie > 8' ,'ff < 20','opera < 39'], 设定要兼容的浏览器版本,故意将版本设置调低,可以兼容给多的浏览器,否则默认只兼容['> 1%', 'last 2 versions', 'Firefox ESR'] 最新版本的主流浏览器

3,js语法检查和css语法检查都引用了外部配置文件(json格式) .jshintrc 和 .csslintrc ,如下

.jshintrc:

{
    "curly": true,
    "eqeqeq": true,
    "eqnull": true,
    "browser": true,
    "boss":false,
    "expr":true,
    "immed":true,
    "newcap":true,
    "noempty":true,
    "noarg":true,
    "undef":true,
    "regexp":true,
    "node":true,
    "devel":true,
    "globals": {
    "jQuery": true
    }
}

.csslintrc

{
    "adjoining-classes":false,
    "box-sizing":false,
    "box-model" : false,
    "compatible-vendor-prefixes": false,
    "floats":false,
    "font-sizes":false,
    "gradients":false,
    "important":false,
    "known-properties":false,
    "outline-none":false,
    "qualified-headings":false,
    "regex-selectors":false,
    "shorthand":false,
    "text-indent":false,
    "unique-headings":false,
    "universal-selector":false,
    "unqualified-attributes":false
}

执行相应task:

已经注册的task, grunt.registerTask('mcss',['cssmin']') , 执行命令为 grunt mcss

未注册的task, 可以直接调用相应插件,执行命令为 grunt cssmin