grunt學習

grunt  依賴 Node.js 因此在安裝以前確保你安裝了 Node.js。而後開始安裝 Grunt。

 

安裝grunt命令行grunt-cli

安裝Grunt-cli，這樣你就能夠使用 grunt 命令來執行某個項目中的 Gruntfile.js 中定義的 task 。可是要注意，Grunt-cli 只是一個命令行工具，用來執行，而不是 Grunt 這個工具自己。

 

npm install grunt-cli -g

須要注意，由於使用 －g 命令會安裝到全局，可能會涉及到系統敏感目錄，若是用 Windows 的話，可能須要你用管理員權限，若是用 OS X ／ Linux 的話，你可能須要加上 sudo 命令。

grunt -version 測試是否安裝成功

生成package.json文件

cd C:\webApp 切換到某個文件夾下

npm init 會給出不少提示信息，輸入值便可，最終就會生成文件

 

安裝grunt 和所須要的插件

合併文件：grunt-contrib-concat

語法檢查：grunt-contrib-jshint

Scss 編譯：grunt-contrib-sass

壓縮文件：grunt-contrib-uglify

監聽文件變更：grunt-contrib-watch

創建本地服務器：grunt-contrib-connect

 

npm install grunt --save-dev

 

查看package.json文件，會發現

"devDependencies": {

"grunt": "^0.4.5"

}

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

 

 

gruntFile.js

package.json應當放置於項目的根目錄中，與Gruntfile在同一目錄中

module.exports = function (grunt) {

    var sassStyle = 'expanded';

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        sass: {},

        uglify: {

            //options: {

            //    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

            //},

            //build: {

            //    src: 'src/<%= pkg.name %>.js',

            //    dest: 'build/<%= pkg.name %>.min.js'

            //}

        },

        concat: {

            options: {

                separator: ';',

            },

            dist: {

                src: ['a.js', 'b.js'],

                dest: './global.js',

            },

        }

    });

    grunt.loadNpmTasks('grunt-contrib-concat');

    //grunt.registerTask('outputcss', ['sass']);//sass編譯

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

    grunt.registerTask('concatTask', ['concat']);

}

grunt concatTask 執行