文件任务Gruntjs入门 (2)

近期一直在查找文件任务之类的问题,在现正好有机会和大家共享一下.

    前一篇记录了Grunt的装安，这篇绍介下怎么应用Gruntjs来搭建一个前端目项，然后应用grunt并合，压缩JS文件。

    大概有如下骤步

    

1. 新建目项Bejs
2. 新建文件package.json
3. 新建文件Gruntfile.js
4. 令命行执行grunt任务

 

    

一、新建目项Bejs

    源码放在src下，该目录有两个js文件，selector.js和ajax.js。译编后码代放在dest，这个grunt会动自成生。

    

 

    

二、新建package.json

    package.json放在根目录下，它包含了该目项的一些元信息，如目项名称、述描、版本号，赖依包等。它该应和源码一样被提交到svn或git。 在现的目项结构如下

    

    package.json容内需符合JSON法语标准，如下

{
  "name": "Bejs",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1"
  }
}

devDependencies中的grunt在前一篇经已装安了，grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat则没有装安。三个分离对于三个任务（task）

    

• grunt-contrib-jshint js法语检查
• grunt-contrib-uglify 压缩，采取UglifyJS
• grunt-contrib-concat 并合文件

    此时，打开令命行工具进入到目项根目录，敲如下令命: npm install

    

    

    

 

    再查看根目录，现发多了个node_modules目录，包含了四个子目录，见图

    

 

    

三、新建文件Gruntfile.js

    Gruntfile.js也是放在目项根目录下，几乎全部的任务都定义在该文件中，它就是一个一般的js文件，面里可以写意任js码代而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

    每日一道理
正所谓“学海无涯”。我们正像一群群鱼儿在茫茫的知识之海中跳跃、 嬉戏，在知识之海中出生、成长、生活。我们离不开这维持生活的“海水”，如果跳出这个“海洋”，到“陆地”上去生活，我们就会被无情的“太阳”晒死。

    

 

    Gruntfile.js由以下容内构成

1. wrapper函数，结构如下，这是Node.js的典范写法，应用exports开公API

   module.exports = function(grunt) {
     // Do grunt-related things in here
   };
   

2. 目项和任务配置
3. 载入grunt插件和任务
4. 定制执行任务

 

    该示例成完以下任务

    

1. 并合src下的文件（ajax.js/selector.js）为domop.js
2. 压缩domop.js为domop.min.js
3. 这两个文件都放在dest目录下

 

    终究的Gruntfile.js如下

module.exports = function(grunt) {
	// 配置
	grunt.initConfig({
		pkg : grunt.file.readJSON('package.json'),
		concat : {
			domop : {
				src: ['src/ajax.js', 'src/selector.js'],
				dest: 'dest/domop.js'
			}
		},
		uglify : {
			options : {
				banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
			},
			build : {
				src : 'dest/domop.js',
				dest : 'dest/domop.min.js'
			}
		}
	});
	// 载入concat和uglify插件，分离对于并合和压缩
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	// 注册任务
	grunt.registerTask('default', ['concat', 'uglify']);
}; 

 

    

四、执行grunt任务

    打开令命行，进入到目项根目录，敲 grunt

    

    从打印信息看出功成的并合和压缩并成生了dest目录及望期的文件，这时的目项目录下多了dest，如下

    

 

    ok，这里绍介了2个罕见任务concat和uglify，jshint等没有绍介。Gruntfile.js里的码代也没有逐一解读，感兴趣的同窗可在gruntjs的官方文档找到。

 

    相干：

    Bejs

    https://npmjs.org/doc/json.html 

文章结束给大家分享下程序员的一些笑话语录： 神灯新篇
一个程序员在海滩上发现了一盏神灯。他在灯上擦了几下，一个妖怪就从灯里跳出来说：“我是世界上法术最强的妖怪。我可以实现你的任何梦想，但现在，我只能满足你一个愿望。”程序员摊开了一幅中东地图说：“我想让中东得到永久的和平。”妖怪答道：“哦，我没办法。自打创世纪以来，那里的战火就没有停息过。这世上几乎没有我办不到的事，但这件事除外。”程序员于是说：“好吧，我是一个程序员，为许多用户编写过程序。你能让他们把需求表述得更清楚些，并且让我们的软件项目有那么一两次按进度按成本完成吗？”妖怪说：“唔，我们还是来看中东地图吧。”