grunt打包過程當中的注意點

一、安裝nodeJS   nodeJS下載地址： http://www.nodejs.org/download/

二、   在Node.js command prompt 這個控制面板輸入 npm install -g grunt-cli  便可安裝grunt  

（解釋：這條命令將會把grunt命令植入系統路徑，這樣就能在任意目錄運行他，緣由是：每次運行grunt時，它都會使用node的require查找本地是否安裝grunt，若是找到CLI便加載這個本地grunt庫，而後應用咱們項目中的GruntFile配置，並執行任務）

三、在你裝項目的文件夾（暫且叫作grunt）中放這麼兩個文件： package.json //項目自動化所依賴的相關插件。 Gruntfile.js //項目自動化工做流配置文件，重要

（對這兩個文件中的內容進行解釋：

 //項目自動化所依賴的相關插件


{
  "name": "h5",  //項目名稱
  "version": "1.0.0",  //項目版本號
  "author": "cuijd",  //建立這個文件的做者
  "family": "zn",
  "spm": {
    "alias": {
      "zepto": "lib/zepto/zepto",
      "swipe": "lib/swipe/swipe"
    }
  },
  "devDependencies": {  //自動化所依賴的插件及其版本號
    "grunt": "0.4.5",
    "grunt-cmd-transport": "0.4.0", //js文件的移動
    "grunt-cmd-concat": "0.2.5",  //鏈接源文件，減小HTTP請求
    "grunt-contrib-less": "0.11.0",  //less文件的解析
    "grunt-contrib-uglify": "0.2.0", //壓縮JS源文件，提升運行時性能
    "grunt-contrib-watch": "0.6.1",  // 監視磁盤文件，一旦更改就會從新運行指定的任務，例如使http服務器從新加載源文件
    "grunt-contrib-clean": "0.4.0",  //用於清理指定文件（夾），通常是構建以前或以後進行
    "grunt-contrib-copy": "~0.5.0",  //用於複製文件或目錄
    "grunt-newer": "~0.7.0",   //監聽最新的grunt
    "grunt-pngmin": "~0.6.1"   //
  }
}




package.json

　　

gruntfile.js

module.exports = function(grunt){

//var transport = require('grunt-cmd-transport');
//var style = transport.style.init(grunt);
//var text = transport.text.init(grunt);
//var script = transport.script.init(grunt);

grunt.initConfig({
pkg : grunt.file.readJSON("package.json"),
less: {
compile: {
options: {
//paths:function(srcFile) {
//var path = require('path');
//console.log(path.dirname(srcFile));	
//return [path.dirname(srcFile) + '/include'];
//} 
},
files: [{
expand: true,
cwd: 'dev/',
src: ['**/*.less','!**/import*.less'],
ext:'.css',
dest:'css/' 
}]
}
},

transport:{
options : {
paths: ["."],
//parsers : {
//'.js' : [script.jsParser],
//'.css' : [style.css2jsParser],
//'.html' : [text.html2jsParser]
//},
alias: '<%= pkg.spm.alias %>',
idleading:'js/',
flatten: true,
debug:false
},
devtodest:{
files : [{
expand: true,
cwd: 'dev/',
src: ['**/*.js'],
//flatten:true,
//ext: '.dev.js',
dest:'js/' 
}]
}
},

copy: {
image: {
files: [{
expand: true,
cwd: 'dev/',
src: [
'**/*.jpg',
'**/*.jpeg',
'**/*.png',
'**/*.gif',
'**/*.swf'
],
dest: 'images/'
}]
}
},
pngmin:{
compile: {
files:[{
expand: true,
cwd: 'dev/',
src: ['**/*.png'],
dest: 'images/'
}]
}
},
concat : {
main : {
options : {
relative : true
},
files : {
//'lib/base/base.js' : ['lib/seajs/sea.js','lib/zepto/zepto.js'] 
//'js/b/js/b.js' : ['js/c/js/c.js','js/b/js/b.js'] 
}
}
},

watch:{
scripts: {
//cwd:'dev/',
files: [
'lesslib/**/*.less',
'lib/**/*',
'lesslib/**/*',
'dev/**/*.js',
'dev/**/*.less',
'**/*.png',
'**/*.jpg',
'**/*.jpeg',
'**/*.gif',
'**/*.swf'

],
tasks: ['default'],
options: {
//spawn: false
}
},
gruntfile: {
files: ['Gruntfile.js'],
options: {
reload: true
}
}
},

clean : {
build : ['.build'] //清除.build文件
}
});

grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-newer');
grunt.loadNpmTasks('grunt-pngmin');

//grunt.registerTask('build', 'runs my tasks', function () {
//var tasks = ['less','transport','concat'];
//// always use force when watching
//grunt.option('force', true);
//grunt.task.run(tasks);
//});
//
grunt.registerTask('default',['newer:less','transport:devtodest','concat','newer:copy']);

};

　放置好這兩個文件，而後在grunt這個文件夾下，按shift+鼠標右鍵 出現 點擊《在此處打開命令窗口》，在上面輸入 npm install  這個命令行，便可安裝package.json中所須要依賴的插件，結果顯示爲。

而後就能夠開始使用grunt了，至於最後到底怎麼使用，請見下節~~   {}