gruntjs入門

安裝node.js,安裝gruntjs

npm install -g grunt-cli
npm install grunt --save-dev
grunt –version

1、轉到項目根文件夾下，安裝插件；

npm init

生成 package.json

{
  "name": "elmok",
  "version": "0.1.0",
  "devDependencies": {
        "grunt" : "~0.4.2",
           "grunt-contrib-concat" : "~0.3.0",
        "grunt-contrib-uglify" : "~0.3.2"
  }
}

安裝

npm install
或
npm install grunt-contrib-concat --save-dev  //按具體插件名

2、創建任務
創建Gruntfile.js

pkg: grunt.file.readJSON('package.json')引入

elmok:項目

concat:任務名；files:{新生成文件:[被合併各文件]}

concat:任務名；files:{新生成文件:[被壓縮文件]}

src:[ ] 源文件路徑

dest:[ ] 生成目標文件

banner參數，給目標文件頭部加注釋信息

<%= pkg.name %>,pkg是用grunt.file.readJSON('package.json')读取到的JSON，而且已经转换为JS对象。依照前面package.json的演示样例，这段代码会在写入文件时被替换为"my-project-name"。

JS对象和JSON来做辅助的配置 <%= grunt.template.today("yyyy-mm-dd") %> 按指定格式生成任務時間

grunt.loadNpmTasks('grunt-contrib-concat');加載任務所需插件

grunt.registerTask('default', ['concat', 'uglify']);註冊任務，任務名以數組存

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            elmok: {
                files: {
                    'dist/m.js': ['1.js', '2.js', '3.js', '4.js']
                }
            }
        },
        uglify: {
            elmok: {
                files: {
                    'dist/main.min.js': ['dist/main.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['concat', 'uglify']);
};

或等等類似

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'main.js',
                dest: 'main.min.js'
            }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Default task(s).
    grunt.registerTask('default', ['uglify']);

};

最後執行：

grunt

小拓展：可任意選擇配置; 轉

options: {
    mangle: false, //不混淆变量名
    preserveComments: 'all', //不删除注释，还可以为 false（删除全部注释），some（保留@preserve @license @cc_on等注释）
    footer:'\n/*! <%= pkg.name %> 最后修改于： <%= grunt.template.today("yyyy-mm-dd") %> */'//添加footer
    report: "min"//输出压缩率，可选的值有 false(不输出信息)，gzip

},
buildall: {//任务三：按原文件结构压缩js文件夹内所有JS文件
    files: [{
        expand:true,
        cwd:'js',//js目录下
        src:'**/*.js',//所有js文件
        dest: 'output/js'//输出到此目录下
    }]
},
release: {//任务四：合并压缩a.js和b.js
    files: {
        'output/js/index.min.js': ['js/a.js', 'js/main/b.js']
    }
}