Back

使用grunt进行自动化 (using grunt to speed up your js development)

发布时间: 2015-02-19 09:34:00

refer to:  http://gruntjs.com/getting-started

自动化永远是我们程序员所追求的方式. 

对于c 有 make ,对于 ruby 有 rake, 对于 java 有ant, maven, ivry, 对于js 则是 grunt.

Rails 或者 Titanium 自带的一些命令虽然好用, ( $ alloy compile,  $ ti build/clean) 但是粒度略小. 比如我要用jade 编写xml, 用coffee编写js , 就需要在 运行 $ alloy compile 之前先运行 一个 脚本: 

# file name:  compile_my_coffee_to_js: 
#compile coffee
cd app/controllers/
coffee -bc *.coffee
cd ../../

cd app/controllers/home/
cat home_market.coffee home_master.coffee home_me.coffee home_competition.coffee home_community.coffee home_version.coffee home_frame.coffee | coffee -bc --stdio  > ../home.js
cd ../../../

其实每次运行这个脚本就很烦. 而且可读性差. 而且跟grunt语言相比有很大的缺点( 最突出的就是不如grunt专业和全面), 将来维护的话必然是个大坑. ( 想起之前有运维同学专门手写了个 shell 部署脚本的程序, 花了好几天时间,结果写出来的东西 跟capistrano 相差甚远, 不但可读性差(shell v.s. ruby, 呵呵) 而且无法回滚.

所以 , 有好轮子就要用. 对自身也是个提高. 

再之, 考虑到 grunt 本身就是个国宝级项目 (github 9133 个关注), 我们是务必要用的.

安装:  

$ npm install -g grunt

$ npm install -g grunt-cli

运行: 

需要本地目录有 Gruntfile ( 跟Makefile, Rakefile 极度类似) , package.json (跟 Gemfile 极度类似) 

Gruntfile.(js|cofee):  定义了要运行的各种方法 . 下面是个例子:

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'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

package.json: 跟Gemfile一样, 定义了各种依赖包. 通过 $ grunt-init 或者 $npm init  来生成.下面是个例子: 

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

在 Gruntfile 中,可以使用 <% %> 来引用配置文件的各种信息:

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'
    }
  }
});

加载任务( load task) :

grunt.loadNpmTasks('grunt-contrib-uglify');

加载自定义任务，　并且默认运行：

  // 默认提供了　plugin: 
  grunt.registerTask('default', ['uglify']);  

  // 如果没有提供plugin的话，就直接　写出来：
  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

Back