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

配置

module.exports = function(grunt) {

    var sassStyle = 'expanded';

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                stripBanners: true

            },
            distPlugin: {
                src: ['./src/plugin-one.js', './src/plugin-two.js'],
                dest: './global.js'
            },
            distCore: {
                src: ['./src/core-one.js', './src/core-two.js'],
                dest: './core.js'
            }
        }
    });

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

    grunt.registerTask('concatjs',['concat']);
    grunt.registerTask('default');

};

说明

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

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

grunt.initConfig({
  concat: {
    basic_and_extras: {
      files: {
        'dist/basic.js': ['src/main.js'],
        'dist/with_extras.js': ['src/main.js', 'src/extras.js'],
      },
    },
  },
});

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

压缩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这三个任务

现在我的配置

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                stripBanners: true

            },
            distPlugin: {
                src: ['./src/plugin-one.js', './src/plugin-two.js'],
                dest: './global.js'
            },
            distCore: {
                src: ['./src/core-one.js', './src/core-two.js'],
                dest: './core.js'
            }
        },
        uglify: {
            compressjs: {
                files: {
                    './global.min.js': ['./global.js'],
                    './core.min.js' : ['./core.js']
                }
            }
        },
        jshint: {
            all: ['./global.js']
        }

    });


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


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

};

下一步

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

1. 本地服务器我可以直接用nginx/apache,还可以include代码片段

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

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

那么目标也就很明显了:

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

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

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