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 和所須要的插件
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 執行