前端工业化工具Grunt初体验

今天来学学Grunt~~目的是为了自动化！自动压缩...自动修复...自动合并等...

提示：Grunt基于Node.js，安装之前要先安装Node.js

1.安装 grunt-cli

npm install -g grunt-cli

2.在项目目录下，用以下命令创建一个基本的package.json文件

npm init

3.安装 Grunt 插件，并依赖到packgae.json

npm install grunt --save-dev

同样方法按需安装常用Grunt插件如：

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

grunt-contrib-uglify：压缩js代码
grunt-contrib-concat：合并js文件
grunt-contrib-qunit：单元测试
grunt-contrib-jshint：js代码检查
grunt-contrib-watch：监控文件修改并重新执行注册的任务

4.根目录创建Gruntfile.js，放入官方例子：

module.exports = function(grunt) {

    //项目配置
    grunt.initConfig({
        //读入package.json文件的配置信息，并存入pkg
        pkg: grunt.file.readJSON('package.json'),
        //下面是每个任务的自定义配置：

        //配置uglify插件
        uglify: {
            options: {
                //此处定义的banner注释将插入到输出文件的顶部
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
            },
            //合并src下的test.js文件到build目录，合并后文件名为test.min.js
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }
    });

    // 加载所需要的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 默认任务
    grunt.registerTask('default', ['uglify']);

};

然后我们创建src文件夹里面放入test.js

然后grunt一下后，就会发现多了一个build文件夹，里面还放了压缩的test.min.js