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,編譯成功!

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章