grunt打包过程中的注意点

1、安装nodeJS   nodeJS下载地址： http://www.nodejs.org/download/

2、   在Node.js command prompt 这个控制面板输入 npm install -g grunt-cli  即可安装grunt  

（解释：这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，原因是：每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库，然后应用我们项目中的GruntFile配置，并执行任务）

3、在你装项目的文件夹（暂且叫做grunt）中放这么两个文件： package.json //项目自动化所依赖的相关插件。 Gruntfile.js //项目自动化工作流配置文件，重要

（对这两个文件中的内容进行解释：

package.json //项目自动化所依赖的相关插件


{
  "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"   //
  }
}

　　

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了，至于最后到底怎么使用，请见下节~~   {}