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 執行
相關文章
相關標籤/搜索