基於grunt前端工程化

Grunt是什麼

     grunt是基於nodejs的 前端工程構建工具。一位牛人的話「前端80%是工程問題，20%是技術問題」，grunt就爲了解決前端開發的工程問題的。

官網站點：http://gruntjs.com/

 

使用前提 

1.  安裝nodejs 環境

      下載與系統對應的安裝文件，window下下載Windows Installer (.msi)。

      官網： http://nodejs.org/

      雙擊安裝，一路next就能夠了。安裝後在cmd裏運行：node –v 檢查是否安裝成功。若是有問題，查看環境變量path中是否有nodejs的安裝路徑配置。

 

     2.   瞭解npm

     Npm是一個NodeJS包管理和分發工具，他提供了nodejs插件的依賴管理。

     官網：https://npmjs.org

     如今npm已經集成在nodejs的安裝包，不須要單獨安裝了。

 

     經常使用npm命令：

     npm install xxx 安裝模塊

     npm install xxx -g 將模塊安裝到全局環境中

     npm ls 查看安裝的模塊及依賴

     npm ls -g 查看全局安裝的模塊及依賴

     npm uninstall xxx  (-g) 卸載模塊

     npm cache clean 清理緩存

 

構建基於grunt的前端開發工程

      基於grunt構建的前端工程能作不少事情，常見的有： 文件壓縮，文件合併，less文件編譯，sass文件編譯，coffeeScript文件的編譯等。具體見：http://gruntjs.com/

在grunt官網站點的get start中能夠看到若是一步一步構建一個grunt工程。

安裝grunt：

npm install -g grunt-cli

grunt 工程中主要的兩個文件介紹：

package.json 配置工程中依賴的全部grunt 插件

例如：

{
  "name": "grunDemo",
  "version": "0.1.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-contrib-watch": "~0.3.1",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-cssmin": "~0.4.2",
    "grunt-contrib-clean": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-less": "~0.7.0"
  }
}

若是工程中已經存在此文件，只需運行如下命令就可在相應的目錄下面下載grunt的插件。

npm install 

若是package.json中尚未配置相應插件，安裝時能夠添加如下參數自動將插件配置到package.json文件。

npm install XXX --save-dev

 

Gruntfile.js 工程任務定義和運行控制文件。

module.exports = function (grunt) {

    grunt.file.defaultEncoding = 'utf-8';

    // Project configuration.
    grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),

            //清空已經build的文件
            clean: {
                build: {
                    src: ["./build/**/*"],
                    filter:"isFile"
                }
            },

            //coffee文件編譯路徑配置
            coffee: {
                compile: {
                    options: {
                        bare: true
                    },
                    expand: true,
                    cwd: './src/javascripts',
                    src: ['**/*.coffee'],
                    dest      : "./build/javascripts",
                    ext       : '.js',
                    flatten   : false
                }
            },
            //複製文件
            copy: {
                main: {
                    expand    : true,
                    cwd       : './src/javascripts/',
                    src       : ["**/*.js"],
                    dest      : "./build/javascripts"
                }
            },

            //scss 文件編譯配置
            compass: {
                compile: {
                    options: {
                        sassDir   : "./src/stylesheets",
                        cssDir    : "./build/stylesheets",
                        debugInfo : false,
                        noLineComments : true,
                        outputStyle : 'compressed'
                    }
                }
            },
            //編譯less文件
            less: {
                compile: {
                    options: {
                        paths: ['./build/stylesheets']
                    },
                    files: {
                        './build/stylesheets/indexLess.css': ['./src/stylesheets/index.less']
                    }
                }
            },

            //合併文件
            concat: {
                options: {
                    separator: ';'
                },
                array: {
                    files: {
                        "./build/javascripts/concatIndex.js": ['./src/javascripts/concat/a.js','./src/javascripts/concat/b.js']
                    }
                }
            },
            //js壓縮
            uglify: {
                codegen: {
                    options: {
                        preserveComments: false,
                        //compress: true
                        // 用於將utf-8編碼的文件轉換爲ascii編碼，以防止js腳本在gbk頁面上出錯
                        //alternative，爲用到的utf-8編碼文件設置 charset='utf-8'
                        beautify:{
                            ascii_only:true
                        }
                    },
                    files: [
                        {
                            dest  : "./build/javascripts/index-min.js",
                            src   : ['./build/javascripts/index.js','./build/javascripts/concatIndex.js']
                        }
                    ]
                }
            },
            //css壓縮
            cssmin: {
                //css: {
                //    expand: true,
                //    src: '**/*.css',
                //    ext: "-min.css",
                //    cwd: "./build/stylesheets/",
                //    dest: "./build/stylesheets/"
                //}
                css: {
                    files: [
                        {
                            dest: "./build/stylesheets/index-min.css",
                            src: "./build/stylesheets/index.css"
                        },
                        {
                            dest: "./build/stylesheets/indexLess-min.css",
                            src: "./build/stylesheets/indexLess.css"
                        }
                    ]
                }
            },
            //監控任務
            watch: {
                compass: {
                    files: ["src/stylesheets/**/*.scss"],
                    tasks: ["compass:compile", "cssmin:css"]
                },
                coffee: {
                    files: ["./src/javascripts/**/*.coffee"],
                    tasks: ["coffee","uglify"]
                }
            }
    });
    //加載grunt模塊
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-coffee');

    grunt.registerTask('default', ["clean", "coffee", "concat", "uglify", "less", "compass", "cssmin"]);

};

　　

 

sass環境配置

demo工程中有sass相關編譯和配置，因此這裏也說下sass環境的配置

一、安裝ruby。在這裏下載ruby安裝包安裝就能夠。https://www.ruby-lang.org/zh_cn/  或者 http://rubyinstaller.org/

二、安裝compass。http://www.ruanyifeng.com/blog/2012/11/compass.html

     運行：

gem install compass

問題：

安裝compass時提示http 304 ，ruby版本太低，從新下載高版本的rubyinstaller。

安裝compass沒有反應或者很慢，有可能要FQ或者設置https協議，具體google下了。

編譯sass時提示配置環境變量，可是環境變量已經配置了，運行如下命令可解決問題。

gem update --system

編譯sass文件報 invalid charset GBK, 在環境變量配置 ： rubyopt="-Ku"

 

demo下載地址：http://pan.baidu.com/s/1nBGLU

參考: http://beiyuu.com/grunt-in-action/