Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

4,304

Node.js:Grunt自动构建

  • 2013-12-08
  • 暂无评论

Grunt是一个自动化的项目构建工具

  • 如果你需要重复的执行像压缩,编译,单元测试,代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务,你所需要做的只是配置好Grunt,这样能很大程度的简化你的工作。
  • 如果在团队中使用Grunt,你只需要与其他人员约定好使用Grunt应该规避的问题,就能够很方便的自动化的处理大部分的常见工作任务

大多数的任务Grunt都提供了可用的Grunt插件,并且每天都有插件诞生并发布到社区中。我想你所熟悉的有:

  • JSHint: JS代码质量检查工具,类似jsLint
  • Uglify: 压缩JS源文件,提高运行时性能
  • Less: 将Less编译为CSS
  • Sass:将sass编译为css
  • CoffeeScript: 将CoffeeScript编译为JavaScript
  • CSSLint
  • watch: 监视磁盘文件,一旦更改就会重新运行指定的任务,例如使http服务器重新加载源文件
  • clean: 用于清理指定文件(夹),一般是构建之前或之后进行
  • compass: 调用Compass工具生成CSS文件
  • concat: 连接源文件,减少HTTP请求
  • copy: 复制文件(夹)

插件清单:http://gruntjs.com/plugins
一般前端需求:js压缩(grunt-yui-compressorgrunt-contrib-uglify:有很多关于js的功能,合并,检查),css压缩(grunt-yui-compressor),Less及coffeeScript格式编译,文件合并(grunt-contrib-concat

一个重要的需求,自动更新文件:watch(grunt-contrib-watch),将对文件的变动进行自动调用脚本,神器般的存在(监视磁盘文件,一旦更改就会重新运行指定的任务,例如使http服务器重新加载源文件)

更多需要可以看插件清单,其中还有一个clean(grunt-contrib-clean

开始一个Grunt

1.首先安装Grunt:(需要安装Node.js,直接安装即可)

npm install grunt@VERSION --save-dev --global

2.建立项目依赖文件:在对应的自动构建目录新建package.json

{
 "name": "xxx",
 "version": "4.0.0",
 "devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-uglify": "~0.2.0",
  "grunt-contrib-concat": "~0.3.0",
  "grunt-yui-compressor": "~0.3.0",
  "grunt-contrib-clean": "~0.4.1",
  "grunt-contrib-copy": "~0.4.0"
 }
}

#是Node.js的基本构建包,编写后,在目录执行

npm install

#会自动在目录下建立所需要的模块及对应的依赖包

3.构建任务文件:在对应的自动构建目录新建Gruntfile.js

module.exports = function(grunt) {
 grunt.initConfig({
  pkg: grunt.file.readJSON('package.json')
//编写任务,根据不同的插件参数设置任务
xxx:{}
,clean: {
   build: ['~temp']
  }
 });
 // 载入插件 ,将任务所需的插件装载
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-yui-compressor');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-clean');
 // 注册任务,在命令行可以通过grunt 任务名称执行批量任务设置
 grunt.registerTask('default', ['clean']);
 grunt.registerTask('build', ['concat', 'cssmin:main', 'uglify:main', 'clean:build']);
};

4.编写自己的插件:

http://www.gruntjs.org/article/creating_plugins.html#

 

官网:http://www.gruntjs.org

说明:http://www.infoq.com/cn/articles/GruntJs/



back up ↑

无觅相关文章插件,快速提升流量