grunt搭建自动化前端环境(MAC下简单完整流程)

安装运行grunt的环境

1、Grunt运行在node下，所以首先需要安装node
brew install node
2、全局安装安装 grunt-cli （并非grunt，允许安装多版本的grunt）
npm install -g grunt-cli

注意：以上安装都是全局安装不需要指定目录

创建grunt 项目

1、创建grunt目录；mkdir study

以下命令都是在这个目录下完成的

2、npm init //引导你创建一个package.json文件，包括名称、版本、作者这些信息等

3、npm install grunt –save-dev //安装grunt

4、npm install grunt-contrib-uglify –save-dev //安装Grunt 插件（这里Demo以grunt-contrib-uglify为例，一个压缩插件）
常用插件：
watch : https://www.npmjs.com/package/grunt-contrib-watch
Uglify : https://www.npmjs.com/package/grunt-contrib-uglify
concat : https://www.npmjs.com/package/grunt-contrib-concat
cosmic : https://www.npmjs.com/package/grunt-contrib-cssmin
imagemin : https://www.npmjs.com/package/grunt-contrib-imagemin
concat : https://www.npmjs.com/package/grunt-contrib-concat

5、配置Gruntfile.js文件(以添加uglify任务为例)

首先，在配置gruntfile.js之前，先看一下配置完Gruntfile.js后的项目目录（即在1-5的操作后当前目录结构为下图）

然后，解释一下插件的任务描述 ：将study/js/main.js压缩为study/src/list.min.js
ps : src目录没有时会自动创建

Gruntfile.js配置内容如下：

module.exports=function(grunt){
    'use strict';
    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),
        trails:{'src':'js/*.js','dest':'src/list.min.js'},
        uglify:{
            options:{
                stripBanners:true,
                banner:"<%=pkg.author%>-<%=pkg.version%> <%=grunt.template.today('yyyy/mm/dd')%> "

            },
            jsmin:{
                src:"<%=trails.src%>",
                dest:'<%=trails.dest%>'
            }

        }
    });
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.registerTask("jsmin",['uglify']);

}

6、iterm中运行：grunt jsmin 进行测试

以上操作做完之后的更改为下图

更多专业和详细内容请参见
http://blog.youkuaiyun.com/wangfupeng1988/article/details/46418203