grunt自動化加密js

Grunt配置方法

前段時間終于搞定了grunt自動化加密js，整理了下流程，省的大家走彎路哈！整個包的下載下傳位址：http://download.csdn.net/detail/lemon_zhao/9598890

1.從https://nodejs.org/en/下載下傳node安裝包 安裝nodeJs環境

檢查nodeJs是否安裝成功，cmd下輸入node -v檢查目前node版本号

2.安裝全局CLI

cmd輸入 npm install -g grunt-cli

安裝後的 grunt-cli路徑C:\Users\lenovo\AppData\Roaming\npm\node_modules

3.在C:\lemon\lab建立兩個檔案 Gruntfile.js package.json，這兩個是配置檔案，從我上面給的連結可以下載下傳得到，我得特别說明下

package.json，描述編譯檔案，js的版本号啦，作者啦，license啦都放這

{
    "name": "test",
    "version": "v1.4.4",
    "description": "jsEncrypt",
    "author": "lemon",
    "license": "MIT",
    "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
    },
    "dependencies": {
        "express": "3.x"
    }
}
           

Gruntfile.js，編譯代碼，編譯源代碼路徑，編譯後代碼路徑，一些回調函數

module.exports = function (grunt) {
    // 建構任務配置
    grunt.initConfig({
        //讀取package.json的内容，形成個json資料
        pkg: grunt.file.readJSON('package.json'),
        //壓縮js
        uglify: {
            //檔案頭部輸出資訊
            options: {
                banner: '/* <%= pkg.name %> <%= pkg.description %> <%= pkg.version %> */\n',
                footer: '\n/* <%= grunt.template.today("yyyy-mm-dd") %> by lemon */',
                stripBanners: true
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //相對路徑
                        cwd: 'jsSrc/',
                        src: '*.js',
                        dest: 'jsDist/',
                        rename: function (dest, src) {  
                        var folder = src.substring(0, src.lastIndexOf('/'));  
                        var filename = src.substring(src.lastIndexOf('/'), src.length);  
                        //  var filename=src;  
                        filename = filename.substring(0, filename.lastIndexOf('.'));  
                        var fileresult=dest + folder + filename + '.min.js';  
                        grunt.log.writeln("現處理檔案："+src+"  處理後檔案："+fileresult);  
                        return fileresult;  
                        //return  filename + '.min.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: 'cssSrc/',
                    src: '*.css',
                    dest: 'cssDist/',
                    rename: function (dest, src) {  
                    var folder = src.substring(0, src.lastIndexOf('/'));  
                    var filename = src.substring(src.lastIndexOf('/'), src.length);  
                    //  var filename=src;  
                    filename = filename.substring(0, filename.lastIndexOf('.'));  
                    var fileresult=dest + folder + filename + '.min.css';  
                    grunt.log.writeln("現處理檔案："+src+"  處理後檔案："+fileresult);  
                    return fileresult;  
                    //return  filename + '.min.js';
                        }
                    }
                ]
            }
        }
    });
    // 加載指定插件任務
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 預設執行的任務
    grunt.registerTask('default', ['uglify', 'cssmin']);
};
           

4.在這個目錄下執行 npm install

5.有報錯可能說：“ grunt-contrib-cssmin”notfound，需要安裝css壓縮插件

執行 npm install grunt-contrib-cssmin

6.有報錯可能說： Fatal error :Unable to find local grunt或者找不到 grunt 的錯誤

重新安裝 grunt

把 C:\Users\SOS\AppData\Roaming\npm\node_modules 下面的 grunt-cli 檔案删除。。重新執行

npm install -g grunt-cli

7.在lab目錄

在lab目錄下執行grunt，編譯成功！