1. Grunt 的介绍和使用

参考链接：http://www.gruntjs.net/ Grunt中文网

为何要用构建工具？

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

为什么要使用Grunt？

Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。先看看入门文档吧。

可用的Grunt插件

你所需要的大多数task都已经作为Grunt插件被开发了出来，并且每天都有更多的插件诞生。插件列表页面列出了完整的清单。下面给出几个你可能听说过的插件：

  1. CoffeeScript 它和思想跟 Ruby 特别的像，是我们可以更简单的去写 JS ，它使得我们整个的书写 JS 变得十分简单
  2. handlebars 它是有个模板引擎
  3. jade 它也是有个模板引擎
  4. JS Hint 它是一个代码检查工具，他可以把我们平常团队规范的 JS 进行规整，不让每个人去随意地书写 JS ，它有一个完整的列表，可以根据我们整个 Team 相关的需要把我们的配置写到它的配置文件里面，这个时候大家就都必须遵守这个配置进行书写
  5. Less 它是一个 css 预处理器，可以让 css 像编程一样去书写
  6. REQUIRE.JS 它是一个 JS 模块化的工具，也是一个非常伟大的库
  7. Sass 它也是一个 css 预处理器，跟 Less 所做的功能差不多
  8. Stylus 它也是一个 css 预处理器，跟 Less 所做的功能差不多

    2. Grunt 的安装

参考链接：http://www.gruntjs.net/getting-started Grunt 快速入门

  1. 安装 CLI ``` npm install -g grunt-cli
  1. 上述命令执行完后，`grunt`  命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。<br />注意，安装`grunt-cli`并不等于安装了 Grunt！<br />
  2. Grunt CLI的任务很简单：调用与`Gruntfile`在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。<br />
  3. 这样就能让多个版本的 Grunt 同时安装在同一台机器上。<br />CLI 是如何工作的<br />
  4. 每次运行`grunt`时，他就利用node提供的`require()`系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行`grunt`。<br />
  5. 2.  在桌面新建一个 grunttest 文件夹，并在 命令行中进入该目录下

cd Desktop cd grunttest

  2. 3. Grunt CLI 已经正确安装，还需要在项目中新建两个文件 package.json 和 Gruntfile，这两个是 运行 Grunt 必须有的文件
  3. 3. 项目初始化，生成 package.json 文件
  4. 3. 在项目中安装 grunt 工具

cnpm install grunt —save-dev

  2. 6. 此时运行 grunt ，命令行中会报如下错误
  4. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-3a74632e92152a4b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  5. 无法找到 gruntfile ，gruntfile 是项目中写任务的文件 它可以是一个文件也可是是一个文件夹
  8. 7. 在项目中新建一个 gruntfile.js 文件
  9. 7. 运行 grunt ，命令行中会报如下错误
  11. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-045149e77ca017d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  12. 这个是因为我们并没有书写需要执行什么任务的代码，现在安装步骤已经完成了<br />
  13. #3.  Grunt 的应用<br />
  14. 参考链接：[http://www.gruntjs.net/configuring-tasks](http://www.gruntjs.net/configuring-tasks)  Grunt 配置任务
  17. 1. 在之前的项目中新建文件 结构如下
  19. > js -> index.js<br />
  20. js -> main.js<br />
  21. index.html<br />
  22. build<br />
  23. dest
  26. 2. 编辑文件<br />
  27. index.js

var index = index || {}; index = { init:function(argument) { console.log(‘index init’); } } index.init();

  1. main.js

function test(argument) { this.a = 1; }; test.prototype.method_name = function(){ console.log(this.a); };

  1. gruntfile.js 暂时配置了第一个 `uglify` 压缩任务

//不需要 require 直接以模块的形式便可以把 grunt 引入进来 module.exports = function(grunt) { //grunt 初始化 grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json’), //压缩 uglify: { options:{ //后面的命令是 grunt 模块自带的命令，他创建了一个时间 banner:’/! create by <%= grunt.template.today(“yyyy-mm-dd”) %> /\n’ }, //这个是帮我们找到静态资源所对应的目录 它可以把我们的静态资源指定 从哪来 到哪去 static_mappings:{ //files 可以支持数组进行批量的操作 files:[{ //从哪来 src:’js/index.js’, //到哪去 dest:’build/index.min.js’ },{ src:’js/main.js’, dest:’build/main.min.js’ }] } }, //合并 concat: {

  1.     },
  2.     //观察本地文件的变化，让他去可以工作
  3.     watch: {
  5.     }
  6. });
  7. //加载上面初始化时配置的插件 这些需要的包都需要在命令行中进行安装 --save-dev
  8. grunt.loadNpmTasks('grunt-contrib-uglify');
  9. grunt.loadNpmTasks('grunt-contrib-concat');
  10. grunt.loadNpmTasks('grunt-contrib-watch');
  12. //默认被执行的任务列表
  13. grunt.registerTask('default',['uglify'])

}

  2. 3. 安装在 gruntfile.js 文件中所用到的三个插件

cnpm install grunt-contrib-uglify —save-dev cnpm install grunt-contrib-concat —save-dev cnpm install grunt-contrib-watch —save-dev

  2. 4. 运行程序 `grunt`，如下图所示，执行成功了
  4. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-209819b552a3e15b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. 5. 因为上面的执行任务列表只写了 uglify 压缩命令，此时去查看 build 文件夹会发现里面多出了 一个 index.min.js 和 main.min.js 文件<br />
  8. index.min.js

/! create by 2017-11-25 /

var index=index||{};(index={init:function(i){console.log(“index init”)}}).init();

  1. main.min.js

/! create by 2017-11-25 /

function test(t){this.a=1}test.prototype.method_name=function(){console.log(this.a)};

  1. 这两个文件就是将 index.js  和 main.js 文件压缩后得到的对应的两个文件<br />
  2. 6.  编辑 gruntfile.js 文件 添加 `concat` 合并命令

//合并 concat: { bar: { src: [‘build/*.js’], dest: ‘dest/all.min.js’ } }

//默认被执行的任务列表 grunt.registerTask(‘default’, [‘uglify’,’concat’])

  2. 7. 运行程序 `grunt`，命令行中显示如下图，证明运行成功了
  4. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-582495d2196358d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. 8. 此时会发现在 dest 文件夹下新增了一个 all.min.js 文件<br />
  8. all.min.js

/! create by 2017-11-25 /

var index=index||{};(index={init:function(i){console.log(“index init”)}}).init(); /! create by 2017-11-25 /

function test(t){this.a=1}test.prototype.method_name=function(){console.log(this.a)};

  1. 这个文件将压缩好的 index.min.js 和 main.min.js 文件给合并在了一起<br />
  2. 9.  还有一个是 `watch` 插件，它主要是可以在运行程序后，你又去修改 类似于 index.js 这样的文件后，它可以自动观察到你的修改操作自动执行 后面自定义的行为 （uglify,concat）<br />
  3. 编辑 gruntfile.js 文件

//观察本地文件的变化，让他去可以工作 watch: { //这里以数组的方式设置需要观察的文件 files:[‘js/index.js’,’js/main.js’], //这里是以数组的方式定义需要执行的任务列表 tasks:[‘uglify’,’concat’] }

//默认被执行的任务列表 grunt.registerTask(‘default’, [‘uglify’,’concat’,’watch’])

  1. 10 .  此时运行程序 `grunt`，你会发现在命令行中程序并没有结束
  3. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-34d65cba52fad3c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  6. 然后再编辑器中修改 index.js 文件

var index = index || {}; index = { init:function(argument) { console.log(‘index ok’); } } index.init();

  1. `ctrl + s` 保存相应的操作，你会发现在命令行中又多了几行操作提示，是说它观察到了 你修改了 index.js 文件 然后它又自动重新执行了一遍 `uglify` `concat` 任务
  3. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-d3e8c46794dd61a3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  6. 查看此时的 index.min.js 和 all.min.js 文件，会发现它们也将你刚才修改的一些代码进行了同步<br />index.min.js

/! create by 2017-11-25 /

var index=index||{};(index={init:function(i){console.log(“index ok”)}}).init();

  1. all.min.js

/! create by 2017-11-25 /

var index=index||{};(index={init:function(i){console.log(“index ok”)}}).init(); /! create by 2017-11-25 /

function test(){this.a=1}test.prototype.method_name=function(){console.log(this.a)};

`` 修改 main.js 文件，也会得到相应的更新，这便是watch` 观察插件的作用

  1. 更多的使用技巧可以到官网自行查看学习

参考链接：http://www.gruntjs.net/sample-gruntfile Gruntfile 实例
http://www.gruntjs.net/creating-tasks 创建任务