km之路--006 前端工程化 一 grunt

grunt 简介

一句话：自动化。对于须要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具能够减轻你的劳动，简化你的工做。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工做。

文档：http://www.gruntjs.net/getting-started

安装grunt-cli

 grunt分为两种，一种是服务端，一种是客户端，而咱们须要安装的就是客户端：grunt-cli

npm install -g grunt-cli

 

而后就能够可使用grunt-cli了

laolang@laolang-PC:~$ grunt -v
grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

http://gruntjs.com/getting-started
laolang@laolang-PC:~$ 

 

若是提示grunt命令未找到，那就须要你手动创建grunt的软连接了

建立项目

npm init

 

输入必要信息以后就建立好了

在当前项目安装grunt

npm install grunt --save-dev

 

 

编写Gruntfile.js

这是一个标砖的JS文件，主要包括：
1. 任务配置代码
2. 插件加载代码
3. 任务注册代码
切全部的代码须要在以下结构中：

module.exports = function(grunt) {

};

 

合并文件

github: https://github.com/gruntjs/grunt-contrib-concat

安装grunt-contrib-concat

npm install --save-dev grunt-contrib-concat

 

 

配置

 1 module.exports = function(grunt) {
 2 
 3     var sassStyle = 'expanded';
 4 
 5     grunt.initConfig({
 6         pkg: grunt.file.readJSON('package.json'),
 7         concat: {
 8             options: {
 9                 stripBanners: true
10 
11             },
12             distPlugin: {
13                 src: ['./src/plugin-one.js', './src/plugin-two.js'],
14                 dest: './global.js'
15             },
16             distCore: {
17                 src: ['./src/core-one.js', './src/core-two.js'],
18                 dest: './core.js'
19             }
20         }
21     });
22 
23     grunt.loadNpmTasks('grunt-contrib-concat');
24 
25     grunt.registerTask('concatjs',['concat']);
26     grunt.registerTask('default');
27 
28 };

 

说明

options是配置项，可配置的有好多个，我如今只用到了stripBanners，当这个属性为true时，会在合并的时候删除注释

option时候的就是合并任务了,能够和我示例中写的同样,也能够像下面这样:

 1 grunt.initConfig({
 2   concat: {
 3     basic_and_extras: {
 4       files: {
 5         'dist/basic.js': ['src/main.js'],
 6         'dist/with_extras.js': ['src/main.js', 'src/extras.js'],
 7       },
 8     },
 9   },
10 });

 

我目前仍是比较倾向于分几个子任务

 

压缩JS文件

github : https://github.com/gruntjs/grunt-contrib-uglify

 

安装grunt-contrib-uglify

npm install grunt-contrib-uglify --save-dev

 

引入

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

 

配置

uglify: {
    compressjs: {
        files: {
            './global.min.js': ['./global.js'],
            './core.min.js' : ['./core.js']
        }
    }
}

 

能够配置的有不少,我目前什么属性都没配置,所有是默认值

注册任务

grunt.registerTask('compressjs',['concat','jshint','uglify']);

 

这意思是说compressjs会执行 concat jshint uglify这三个任务

 

如今个人配置

 1 module.exports = function(grunt) {
 2 
 3     grunt.initConfig({
 4         pkg: grunt.file.readJSON('package.json'),
 5         concat: {
 6             options: {
 7                 stripBanners: true
 8 
 9             },
10             distPlugin: {
11                 src: ['./src/plugin-one.js', './src/plugin-two.js'],
12                 dest: './global.js'
13             },
14             distCore: {
15                 src: ['./src/core-one.js', './src/core-two.js'],
16                 dest: './core.js'
17             }
18         },
19         uglify: {
20             compressjs: {
21                 files: {
22                     './global.min.js': ['./global.js'],
23                     './core.min.js' : ['./core.js']
24                 }
25             }
26         },
27         jshint: {
28             all: ['./global.js']
29         }
30 
31     });
32 
33 
34     grunt.loadNpmTasks('grunt-contrib-concat');
35     grunt.loadNpmTasks('grunt-contrib-jshint');
36     grunt.loadNpmTasks('grunt-contrib-uglify');
37 
38 
39     grunt.registerTask('concatjs',['concat']);
40     grunt.registerTask('compressjs',['concat','jshint','uglify']);
41     grunt.registerTask('default',['compressjs']);
42 
43 };

 

 

下一步

根据这篇文档:Grunt 新手一日入门,还能够监听文件变化和创建本地服务器,不过目前还没到用的时候,缘由以下:

1. 本地服务器我能够直接用nginx/apache,还能够include代码片断

2. 目前的配置文件仍是太初级了,我须要的配置是批量处理 js css 等文件的编译与压缩,且要能执行比较复杂的逻辑,好比某个json对象分散定义在不一样的文件中,合并的时候要能自动提取并合并为一个新的文件

3. 考虑到如今还在考虑KM前端刚开始写,如今也学会了grunt的简单使用,因此我须要先设计好前端的目录规范,文件命名规范,而后再考虑批量处理的问题

 

那么目标也就很明显了:

1. 定义KM系统前端项目的开发规范,包括目录结构,各种型文件明明规则等

2. 处理grunt批量合并与压缩文件,也包括sass文件的处理

3. 完整的前端项目构建,也就是src目录中包含的全部静态资源,都要自动发布到制定目录,包括图片,CSS,SASS,JS,HTML等