PHP开发工程师@温州。博客关于:技术、生活、读书、互联网。

使用gruntJs构建javascript项目

gruntJs,一个专为JavaScript提供的自动化项目构建工具。. 如果你需要重复的执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 那么你可以使用Grunt来处理这些任务, 你所需要做的只是配置好Grunt, 这样能很大程度的简化你的工作.

官网 : http://gruntjs.com/

github : https://github.com/gruntjs/grunt


安装grunt

npm install -g grunt-cli

npm install -g grunt

恩,你没看错。通过npm(Node Package Manager)只需要2条命令就完成了grunt的安装。


在项目中使用grunt

想要在项目中使用grunt,首先需要往项目里添加两个文件:package.json和Gruntfile.js

 

package.json:该文件用来为npm存放项目配置的元数据,基于Packages/1.1 规范。

在这个文件里你可以定义你的应用名称( name )、应用描述( description )、应用依赖模块( dependencies )、开发环境依赖模块( devDependencies )等。

如:

{

    "name": "hello world",

    "author": "ykq",

    "homepage": "http://iscript.github.io", 
     "dependencies": { 
         "express": "latest" 
     }, 
     "devDependencies": { 
         "grunt": "latest", 
         "grunt-contrib-uglify": "latest", 
     } 
 } 

接着在项目目录下执行npm install即可根据package.json安装项目所需的依赖。


Gruntfile.js:这个文件就是grunt的配置了,其中详细定义了每个任务的细节和执行任务的顺序等。

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
         //压缩任务
         uglify : {
             options : {
                 banner : '/*! <%= pkg.name %> */\n'
             },
             build : { src : 'app.js',dest : 'app.min.js'} 

         } 
}); 
//加载grunt需要的插件: 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
 
//告诉grunt该怎么执行这些任务: 
grunt.registerTask('default', ['uglify']); 
 }; 

上面这段代码就是通过grunt来执行一个简单的压缩任务。

在项目所在目录,命令行输入grunt即可将app.js压缩成app.min.js。


grunt插件

grunt只是一个自动化管理工具,不管是安装或配置都不复杂,复杂度源于成百上千的第三方插件。

常用插件:

grunt-contrib-uglify :压缩js代码
grunt-contrib-concat :合并js文件
grunt-contrib-qunit :单元测试
grunt-contrib-jshint :js代码检查

grunt-contrib-watch :监控文件修改并重新执行注册的任务

官方插件清单:http://gruntjs.com/plugins



使用ng-Boilerplate来通过grunt完美构建AngularJs项目

https://github.com/ngbp/ng-boilerplate




评论

© yuankeqiang | Powered by LOFTER