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