关于grunt和gulp

grunt

是一套前端自动化工具，一个基于nodeJs的命令行工具，通常用于：
① 压缩文件
② 合并文件
③ 简单语法检查

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

Grunt 基于 Node.js ，用 JS 开发，这样就能够借助 Node.js 实现跨系统跨平台的桌面端的操做，例如文件操做等等。此外，Grunt 以及它的插件们，都做为一个 包 ，能够用 NPM 安装进行管理。因此 NPM 生成的 package.json 项目文件，里面能够记录当前项目中用到的 Grunt 插件，而 Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操做。

安装

有了nodeJs环境后（也就是得先安装nodejs），即可以开始搞grunt了，由于咱们可能在任何目录下运行打包程序，因此咱们须要安装CLI
官方推荐在全局安装CLI（grunt的命令行接口），在命令行输入：

npm install -g grunt-cli

（这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，缘由是每次运行grunt时，它都会使用node的require查找本地是否安装grunt，若是找到CLI便加载这个本地grunt库 而后应用咱们项目中的GruntFile配置，并执行任务）

接下来：生成 package.json 文件

能够去网上找找（复制粘贴）这个 package.json 文件实际上是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下：在项目文件下 npm init

也能够本身模仿写：

 

{   "name": "demo",  

"file": "zepto",

  "version": "0.1.0",  

"description": "demo",  

"license": "MIT",

"devDependencies": {   "grunt": "~0.4.1",   "grunt-contrib-jshint": "~0.6.3",   "grunt-contrib-concat": "~0.3.0",   "grunt-contrib-uglify": "~0.2.1",   "grunt-contrib-requirejs": "~0.4.1",   "grunt-contrib-copy": "~0.4.1",   "grunt-contrib-clean": "~0.5.0",   "grunt-strip": "~0.2.1" }, "devDependencies": {     "grunt": "~0.4.1",     "grunt-contrib-jshint": "~0.6.3",     "grunt-contrib-uglify": "~0.2.1",     "grunt-contrib-requirejs": "~0.4.1",   

  "grunt-contrib-copy": "~0.4.1",     "grunt-contrib-clean": "~0.5.0",     "grunt-strip": "~0.2.1"   },

 "dependencies": {     "express": "3.x"   }

}

安装 Grunt 和所须要的插件

.合并文件：grunt-contrib-concat

• 语法检查：grunt-contrib-jshint
• Scss 编译：grunt-contrib-sass
• 压缩文件：grunt-contrib-uglify
• 监听文件变更：grunt-contrib-watch
• 创建本地服务器：grunt-contrib-connect

在项目文件根目录上：

表示经过 npm 安装了 grunt 到当前项目，同时加上了 –save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。可打开 package.json 文件看下，是否是多了npm install grunt --save-dev

"devDependencies": {
  "grunt": "^0.4.5"
}
命令行输入如下安装插件

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

配置 Gruntfile.js 的语法

这个文件尤为关键，他通常干两件事情：

① 读取package信息

② 插件加载、注册任务，运行任务（grunt对外的接口所有写在这里面）

Gruntfile通常由四个部分组成 ① 包装函数 这个包装函数没什么东西，意思就是咱们全部的代码必须放到这个函数里面

module.exports = function (grunt) {
//你的代码
}

接下来任务配置代码、插件加载代码、任务注册代码。

这三块代码，任务配置代码就是调用插件配置一下要执行的任务和实现的功能，插件加载代码就是把须要用到的插件加载进来，任务注册代码就是注册一个 task，里面包含刚在前面编写的任务配置代码。

 

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

插件加载代码（还有其余插件不作介绍如watch （http://www.cnblogs.com/haogj/p/4785288.html）

 grunt.loadNpmTasks('grunt-contrib-uglify');（压缩）

  grunt.loadNpmTasks('grunt-contrib-concat');（合并）

任务注册代码

 grunt.registerTask('default', ['uglify'，'uglify']);

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%=pkg.file %>.js',
        dest: 'dest/<%= pkg.file %>.min.js'
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}
最后命令行输入
grunt 
也就是最后配置结果代码为

参考：http://www.cnblogs.com/yexiaochai/p/3603389.html

http://gruntjs.com/getting-started

仍是初学，等之后再深刻了解grunt吧

gulp

gulp是基于Nodejs的自动任务运行器，它能自动化的完成js/coffee/less/html/image/css等文件的测试，检查，合并，压缩，格式化，浏览器自动刷新，部署文件生成，并监听文件在改动后重复指定这些步骤。在实现上，它借鉴来了Unix操做系统的管道（pipe）思想，前一级输出，直接变成后一级的输入，使得在操做上很是简单。gulp和grunt很是相似，但相比于grunt的频繁IO操做，gulo的操做就更快写了

如今开始安装：

npm install -g gulp（首先确保已经正确安装nodejs环境，而后以全局的方式安装gulp）

基于本身建的项目文件下 npm install --save-dev gulp(全局安装完后，本身要用到gulp的每个项目都要单独安装一次，也就是所谓的局部安装)

【全局安装gulp是为了执行gulp任务，项目也安装gulp是为了调用gulp插件功能】

自动生成package.json:npm init(基于项目文件根目录)

安装依赖：npm install gulp-uglify --save-dev(即使本地系统里面没有，则命令运行后便装到了本身项目的依赖里 package.json中)其余插件类比便可

在本身的项目文件中创建gulpfile.js

var gulp=require（'gulp'）;//引入gulp

var uglify=require('gulp-uglify');//

var concat=require('gulp-concat');

var paths={

script:['js/index.js','js/main/js']//(项目文件js中的两个文件)

}

gulp.task('default',function(){

gulp.src(paths)

.pipe(uglify())

.pipe(concat('all.min.js'))

.pipe(gulp.dest('build'));

});

最后：运行 gulp;

关于自动加载插件

npm install --save-dev gulp-load-plugins

流式开发的gulp 本人还有待学习