标签：read 项目目录 grunt port 定义 class 命令行 问题 取出
学习文章，详细原文链接：http://yujiangshui.com/grunt-basic-tutorial/
1. grunt是一个JavaScript任务运行器，自动化任务处理工具，是一个工具框架。
2. grunt基于node.js，用js开发。
3. 安装grunt
（1）安装Node.js
（2）npm install -g grunt-cil （注意：安装的并不是Grunt，而是Grunt-cil，即命令行的Grunt，这样可以使用Grunt命令来执行某个项目中的Gruntfile.js中定义的task。Grunt-cil只是一个命令行工具，用来执行，而不是Grunt工具本 身。）
（3）生成package.json文件：在项目根目录下运行npm init。
（4）安装grunt到当前项目：
项目根目录下运行：npm install grunt --save-dev（表示把安装的东西添加到package.），这样，当前项目就依赖grunt，如果安装时没有添加--save-dev参数，需要自行添加信息到package.json。
4. 安装grunt插件：
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint..........
安装后项目中的node_modules文件下会出现相应的插件文件夹。注意：项目中的node_modules文件夹不需要上传，因为package.json文件记录了项目中依赖的插件信息。下载后，在项目文件夹下面输入命令 npm install，NPM会自动读取package.json，将grunt和有关的插件下载。
5. 配置Gruntfile.js文件
1 module.exports=function(grunt){ 2 ....... 3 （1）任务配置代码 4 （2）插件加载代码 5 （3）任务注册代码 6 };
用grunt来注册的一个task从而根据任务配置代码调用需要的插件来执行相应的操作。
6. 具体实例学习详见原文作者github项目。（感激作者）
7. 实例：
（1）一般模板
1 module.exports=function(grunt){ 2 3 //任务配置代码:以对象的格式放在grunt.initConfig函数里面 4 grunt.initConfig({ 5 pkg:grunt.file.readJSON(‘package.json‘),//读取package.json文件，并把里面的信息获取出来 6 uglify:{//在Uglift插件下面，有一个buile任务，内容是把xx.js压缩输出到xx.min.js里面 7 options:{ 8 banner:‘/*!<%=pkg.name%><%=grunt.template.today("yyyy-mm-dd")%>*/\n‘ 9 }, 10 build:{ 11 src:‘src/<%=pkg.name%>.js‘, 12 dest:‘build/<%=pkg.name%>.min.js‘ 13 } 14 } 15 }); 16 17 18 //插件加载代码 19 grunt.loadNpmTasks(‘grunt-contrib-uglifg‘); 20 21 //任务注册代码:zai default上满注册了一个Uglify任务，default就是别名， 22 //默认的task，当我们在项目目录中执行grunt命令的时候，它会执行注册到default上面的任务。 23 grunt.registerTask(‘default‘,[‘uglify‘]); 24 25 26 /*eg:注册其他的task 27 grunt.registerTask(‘compress‘,[‘uglify:bulid‘]); 28 29 需要输入grunt compress 命令来执行这条task，而这条task任务是uglify下面的build任务， 30 也就是说只会执行uglify里面的bulid定义的任务，而不会执行uglify里面定义的其他任务。 31 */ 32 33 34 35 /*需要注意的是： 36 task的命名不能与后面的任务配置同名，也就是说这里的comperss不能命名为uglify，这样会报错或是产生意外情况。 37 */ 38 39 40 };
（2）作者实例
1 module.exports = function(grunt) { 2 3 var sassStyle = ‘expanded‘; 4 5 grunt.initConfig({ 6 pkg: grunt.file.readJSON(‘package.json‘), 7 sass: { 8 output:{ 9 options:{ 10 style:sassStyle 11 }, 12 files:{ 13 ‘./style.css‘:‘./scss/style.scss‘/*将 ./scss/style.scss这个文件以sassStyl变量存储的方式编译成根目录下面的style.css*/ 14 } 15 } 16 }, 17 18 concat:{ 19 options:{ 20 // separator:‘;‘,/*该参数本来是为了防止两个文件之间相互干扰设置的，结果无法被jshint验证通过，可以*/ 21 }, 22 dist:{ 23 src:[‘./src/plugin.js‘,‘./src/plugin2.js‘], 24 dest:‘./global.js‘, 25 }, 26 }, 27 28 uglify:{ 29 compressjs:{ 30 files:{ 31 ‘./global.min.js‘:[‘./global.js‘] 32 } 33 } 34 }, 35 36 jshint:{ 37 all:[‘./global.js‘] 38 }, 39 watch:{ 40 script:{ 41 files:[‘./src/plugin.js‘,‘/src/plugin2.js‘], 42 tasks:[‘concat‘,‘jshint‘,‘uglity‘] 43 }, 44 sass:{ 45 files:[‘./scss/style.scss‘], 46 tasks:[‘concat‘,‘jshint‘,‘uglify‘] 47 }, 48 liverload:{ 49 options:{ 50 liverload:‘<%=concat.options.liverload%>‘ 51 }, 52 files:[ 53 ‘index.html‘, 54 ‘style.css‘, 55 ‘js/global.min.js‘ 56 ] 57 } 58 }, 59 connect:{ 60 options:{ 61 port:9000, 62 open:true, 63 liverload:35729, 64 hostname:‘localhost‘ 65 }, 66 srver:{ 67 options:{ 68 port:9001, 69 base:‘./‘ 70 } 71 } 72 } 73 74 }); 75 76 grunt.loadNpmTasks(‘grunt-contrib-sass‘); 77 grunt.loadNpmTasks(‘grunt-contrib-concat‘); 78 grunt.loadNpmTasks(‘grunt-contrib-jshint‘); 79 grunt.loadNpmTasks(‘grunt-contrib-uglify‘); 80 grunt.loadNpmTasks(‘grunt-contrib-watch‘); 81 grunt.loadNpmTasks(‘grunt-contrib-concat‘); 82 83 grunt.registerTask(‘outputcss‘,[‘sass‘]); 84 grunt.registerTask(‘concatjs‘,[‘concat‘]); 85 grunt.registerTask(‘compressjs‘,[‘concat‘,‘jshint‘,‘uglify‘]); 86 grunt.registerTask(‘watchit‘,[‘sass‘,‘concat‘,‘jshint‘,‘uglify‘,‘connect‘,‘watch‘]); 87 grunt.registerTask(‘default‘); 88 89 };
注意：以上例子在本地运行时，因为本地环境问题，有部分功能不能实现，希望在后面继续深入了解。
标签：read 项目目录 grunt port 定义 class 命令行 问题 取出
原文地址：http://www.cnblogs.com/LinSL/p/7114865.html
