grunt学习笔记

gruntjs 是一个基于nodejs的自动化工具，只要熟悉nodejs或者又一定js经验就可以熟练应用。
最近很火的前端自动化小工具，基于任务的命令行构建工具 http://gruntjs.com

我们需要一个自动化的工作流程，让我们更专注于coding，而不是coding外的繁琐工作。于是Grunt应运而生。可以想像，如果在node环境下，一行命令搞定一个场景，So Cool…

package.json //项目自动化所依赖的相关插件。
Gruntfile.js //项目自动化工作流配置文件，重要

1. 安装
   • 确保已经安装node和npm
   • 然后安装grunt的客户端命令行工具 npm install -g grunt-cli, 安装完之后就有了grunt
     压缩css js和合并文件需要grunt插件，grunt只是一个平台，完成各项任务有对应的插件。
   • grunt插件十分丰富，其中带contrib的为官方插件 其他的为第三方插件
2. 安装grunt插件
   • 方式1 在工程目录中创建一个package.json文件，列出依赖的插件和对应的版本即可
     然后cd到工程目录下 执行 npm install
   • 方式2 使用命令行工具 npm install grunt-contrib-watch --save-dev

3. 创建gruntjs工程文件
   gruntjs支持两种语言创建工程文件： gruntfile.js或者gruntfile.coffee
   grunt工程文件遵循node模块定义方式，主题结构为：

   
       module.exports = function(grunt){
           grunt.initConfig({
               clean:{
                   a:['<%=temp%>'] 
               },
               b:['<%=temp%>']
           });
   
       //获取工程中需要的插件
       grunt.loadNpmTasks('grunt-contrib-clean');
       grunt.loadNpmTasks('grunt-contrib-cssmin');
       grunt.loadNpmTasks('grunt-contrib-uglify');
       grunt.loadNpmTasks('grunt-contrib-watch');
       grunt.loadNpmTasks('grunt-contrib-copy');
       grunt.loadNpmTasks('grunt-contrib-includes');
   
       //注册任务
       grunt.registerTask('build', ['clean','uglify','cssmin','includes','copy','clean']);
       //在命令行中执行grunt,就会使用默认任务
       grunt.registerTask('default',['build']);            
   

   
   //一个完整的gruntjs工程文件
   module.exports = function(grunt){
       var rt = 'src-dev/',
           indexDir = rt + 'index/',
           tempDir  = rt + 'temp/';
       console.log(grunt.option('keys'));
   
       grunt.file.exists(tempDir) && grunt.file.delete(tempDir);
       grunt.file.markdir(tempDir);
   
       grunt.initConfi({
           pkg: grunt.file.readJSON('package.json');
           rt: rt,
           tempDir: tempDir,
           indexDir = indexDir,
           clear: { build:['<%=temp%>']},
           jsdoc:{
               dist:{
                   src:'<%=index%>doc.js',
                   options:{
                       destination:'<%=rt%>../out/'
                   }
               }
           },
           cssmin:{
               combine:{
                   files:{
                       '<%=temp%>c.min.css':['<%=rt%>common/reset.css', '<%=index%>c.css']
                   }
               }
           },
           includes:{
               files:{
                   sr:['<%=rt%>**/*.html'],
                   dest:'<%=temp%>',
                   cwd:'.',
                   flatten:true,
                   options{
                       banner:''
                   }
               }
           },
           watch:{
               files:['<%=index%>j.js','<%=index%>*.html', '<%=index%>c.css']
               tasks:['clean','uglify','cssmin','includes','copy','clearn'],
               options:{ livereload:true}
           },
           uglify:{
               dist:{
                   files:{
                       '<%=temp%>j.js', ['<%=index%>*.js']
                   }
               }
           },
           copy:{
               main:{
                   files:[{
                       flatten: true,
                       expand: true,
                       filter:'isFile',
                       src:['<%=temp%>index.html'],
                       dest='<%=rt%>../src/'
                   }]
               }
           }
   
           //获取工程中需要的插件
           grunt.loadNpmTasks('grunt-contrib-clean');
           grunt.loadNpmTasks('grunt-contrib-cssmin');
           grunt.loadNpmTasks('grunt-contrib-uglify');
           grunt.loadNpmTasks('grunt-contrib-watch');
           grunt.loadNpmTasks('grunt-contrib-copy');
           grunt.loadNpmTasks('grunt-contrib-includes');
   
           //注册任务
           grunt.registerTask('build', ['clean','uglify','cssmin','includes','copy','clean']);
           //在命令行中执行grunt,就会使用默认任务
           grunt.registerTask('default',['build']);

转载于:https://www.cnblogs.com/stephenykk/p/4118576.html