grunt -- javascript自动化工具

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配置文件

//包装函数

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

巴特西

grunt -- javascript自动化工具

最新文章

热门文章