前端工业化工具Grunt初体验

今天来学学Grunt~~目的是为了自动化！自动压缩...自动修复...自动合并等...

提示：Grunt基于Node.js，安装之前要先安装Node.js

1.安装 grunt-cli

npm install -g grunt-cli

2.在项目目录下，用以下命令创建一个基本的package.json文件

npm init

3.安装 Grunt 插件，并依赖到packgae.json

npm install grunt --save-dev

同样方法按需安装常用Grunt插件如：

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

grunt-contrib-uglify：压缩js代码
grunt-contrib-concat：合并js文件
grunt-contrib-qunit：单元测试
grunt-contrib-jshint：js代码检查
grunt-contrib-watch：监控文件修改并重新执行注册的任务

4.根目录创建Gruntfile.js，放入官方例子：

module.exports = function(grunt) {

//项目配置
grunt.initConfig({
//读入package.json文件的配置信息，并存入pkg
pkg: grunt.file.readJSON('package.json'),
//下面是每个任务的自定义配置：

//配置uglify插件
uglify: {
options: {
//此处定义的banner注释将插入到输出文件的顶部
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
//合并src下的test.js文件到build目录，合并后文件名为test.min.js
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});

// 加载所需要的插件
grunt.loadNpmTasks('grunt-contrib-uglify');

// 默认任务
grunt.registerTask('default', ['uglify']);

};

然后我们创建src文件夹里面放入test.js

然后grunt一下后，就会发现多了一个build文件夹，里面还放了压缩的test.min.js