grunt学习一

grunt是前端自动化工具之一。下面是是grunt的简单小示例：

在使用grunt，确保安装nodejs，如果不清楚，可以百度找相关教程，这个教程已经烂大街了。

1.打开cmd，以管理员的身份。（或者使用编辑器自带的终端或控制器（其实也cmd）。这里我使用git shell）

2.安装grunt

npm install -g grunt-cli

和安装node_modules：

npm init //初始化

npm install //安装node模块

3. 新建项目目录，在src创建一个test.js，test.js的内容，你随便输入一点

4. 安装插件

npm install grunt --save-dev

npm install grunt-contrib-uglify --sava-dev

npm install grunt-contrib-cssmin --save-dev

...

检测pakeage.json中devDependecies的变化

5.新建package.json和Gruntfile.js。

package.json这个是node基础知识，不多数。Gruntfile.js是执行grunt的配置文件。

源码：

'use strict'; //使用ecma的严格模式
//包函数
module.exports = function (grunt) {
    //task config,所有插件的配置信息
    grunt.initConfig({
        //获取apckage.json的信息
        pkg: grunt.file.readJSON('package.json'),
        //uglify config
        uglify: { //uglify 是丑化的意思，压缩的js变怎么样，变丑了吧，这就是这个插件的由来
            options: {
                stripBanner: true,
                banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/test.js',
                dest: 'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
            }

        },
    });
    //tell terminal to load and use uglify plugs
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // tell terminal to do something
    /*
    * first param is initConfig's default task
    * second param is array,the element of array is plugName
    * */
    grunt.registerTask('default', ['uglify']);
}

首先我们使用的严格模式‘usestrict’，然后引入grunt的node模块。

grunt.initConfig({})//初始配置

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

grunt.registerTask('defautl',['uglify']);

6.运行

grunt

7. 查看build文件夹下的压缩的js