grunt使用的一些感悟

grunt-cli全局命令 

grunt还需要在工程目录里通过nom本地方式重新安装，本地安装可以通过require引用

grunt配合的一些工具

• grunt-browserify Grunt browserify任务
• babelify Browserify的babel转换器
• grunt-contrib-watch 监听JavaScript的每次改变然后选择性的执行任务，在我们的例子中，文件每次改变都要执行Browserify任务

以上通过npm install grunt-browserify --save-dev的方式安装

babelify是es6转换器，暂时项目中还没用到

bower是管理JS插件的工具 npm install grunt-bower-task --save-dev，可以通过这个工具 安装jquery，backbone等

less css构建工具 可以按照dom结构来编写CSS代码配置全局CSS样式

npm install grunt-contrib-less --save-dev

使用了之后，才发现LESS对于css确实是有帮助的，在开发效率上得到提升，在使用之前我一直以为这个只是某种奇淫技巧

grunt less:development  或者 grunt watch

以下是gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    },
     bower: {  
        "install": {
               "options": {
                         "targetDir": "./public/js/lib",
                         "layout": "byComponent",
                         "install": true,
                         "verbose": false,
                         "cleanTargetDir": false
                      }
                 }
     },
     less: {
       development: {
          options: {
            paths: ["backbone/res/style"]
          },
          files: {
            "backbone/res/style/main.css": "backbone/res/style/assests/main.less"
          }
       },
       production: {
          options: {
            paths: ["assets/css"],
            plugins: [
               new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions"]})//,
               //new (require('less-plugin-clean-css'))(cleanCssOptions)
            ],
            modifyVars: {
               imgPath: '"http://mycdn.com/path/to/images"',
               bgColor: 'red'
            }
          },
          files: {
            "path/to/result.css": "path/to/source.less"
          }
       }
     },
    watch: {
        files: "backbone/res/style/assests/main.less",
        tasks: ["less:development"]
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-bower-task');
 
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');
 
  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};