grunt 入門 應用grunt對代碼進行壓縮

一、什麼是gruntjavascript

  grunt的官方解釋是:javascript世界的構建工具。java

  爲什麼要構建工具?
node

     一句話:自動化。對於須要反覆重複的任務,例如壓縮(minification)、編譯、單元測試、linting等,自動化工具能夠減輕你的勞動,簡化你的工做。當你在Gruntfile文件正確配置好了任務,任務運行器就會自動幫你或你的小組完成大部分無聊的工做。express

二、如何開始grunt?npm

  一、準備node環境 安裝node(參考官方)json

  二、安裝grunt : 咱們須要安裝CLI官方推薦在全局安裝CLI(grunt的命令行接口)grunt

  

npm install -g grunt-cli

  三、新建package.json工具

{
    "name":"my-project-name",        //項目版本"version":"0.1.0","devDependencies":{             //插件名版本
        "grunt":"~0.4.1",
        "grunt-contrib-jshint":"~0.6.3",
        "grunt-contrib-uglify":"~0.2.1",
        "grunt-contrib-requirejs":"~0.4.1",
        "grunt-contrib-copy":"~0.4.1",
        "grunt-contrib-concat":"~0.3.0",
        "grunt-contrib-clean":"~0.5.0",
        "grunt-strip":"~0.2.1"
    },
    
    "dependencies":{
        "express":"3.x"
    }
    
}

4.新建Gruntfile.jsrequirejs

/*module.exports = function(grunt){
    grunt.initConfig({
        pkg:grunt.file.readJSON("package.json"),
        concat:{
            options:{
                separator:';'
            },
            dist:{
                src:['src/zepto.js','src/underscore.js','src/backbone.js'],
                dest:'dest/libs.js'
            }
        },
        uglify:{
            build:{
                src:'dest/libs.js',
                dest:'dest/libs.min.js'
            }
        }
        
    });
    grunt.loadNpmTasks('grunt-contrib-uglify')
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.registerTask('default', ['concat','uglify']);

    //grunt.registerTask('default', ['uglify']);
}
*/
module.exports = function(grunt){
    grunt.initConfig({
        uglify:{
            my_target:{
                files:{
                    'dest/list.min.js/':['src/zepto.js','underscroe.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['uglify']);
}
相關文章
相關標籤/搜索