文件出自：http://www.dbpoo.com/getting-started-with-gulp/

所有功能前提需要安装（本人安装版本v0.10.26）和（本人安装版本1.9.3p484）。

Gulp 是一款基于任务的设计模式的自动化工具，通过插件的配合解决全套前端解决方案，如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。

Gulp安装

全局安装Gulpjs

npm install -g gulp  #全局安装

局部安装Gulpjs

npm install gulp --save-dev # 局部安装

全局安装

1. 将安装包放在 /usr/local 下

2. 可以直接在命令行里使用

本地安装

1. 将安装包放在 ./node_modules 下（运行npm时所在的目录）

2. 可以通过 require() 来引入本地安装的包

选择Gulp组件

前端项目需要的功能：

1、图片（压缩图片支持jpg、png、gif）

2、样式 （支持sass 同时支持合并、压缩、重命名）

3、javascript （检查、合并、压缩、重命名）

4、html （压缩）

5、客户端同步刷新显示修改

6、构建项目前清除发布环境下的文件（保持发布环境的清洁）

通过，寻找对于的gulp组件

: 压缩图片

: 支持sass

: 压缩css

: 检查js

: 压缩js

: 合并文件

: 重命名文件

: 压缩html

: 清空文件夹

: 服务器控制客户端同步刷新（需配合chrome插件及）

安装Gulp组件

安装组件项目目录，通过cd project 进入目录，执行下边的npm安装组件。

npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

项目目录结构

project(项目名称)

|–.git 通过git管理项目会生成这个文件夹

|–node_modules 组件目录

|–dist 发布环境

    |–css 样式文件(style.css style.min.css)

    |–images 图片文件(压缩图片)

    |–js js文件(main.js main.min.js)

    |–index.html 静态文件(压缩html)

|–src 生产环境

    |–sass sass文件

    |–images 图片文件

    |–js js文件

    |–index.html 静态文件

|–.jshintrc jshint配置文件

|–gulpfile.js gulp任务文件

gulp基础语法

gulp通过gulpfile文件来完成相关任务，因此项目中必须包含gulpfile.js

gulp有五个方法：src、dest、task、run、watch

src和dest：指定源文件和处理后文件的路径

watch：用来监听文件的变化

task：指定任务

run：执行任务

编写gulp任务

/**

 * 组件安装

 * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

 */

// 引入 gulp及组件

var gulp    = require('gulp'),                 //基础库

    imagemin = require('gulp-imagemin'),       //图片压缩

    sass = require('gulp-ruby-sass'),          //sass

    minifycss = require('gulp-minify-css'),    //css压缩

    jshint = require('gulp-jshint'),           //js检查

    uglify  = require('gulp-uglify'),          //js压缩

    rename = require('gulp-rename'),           //重命名

    concat  = require('gulp-concat'),          //合并文件

    clean = require('gulp-clean'),             //清空文件夹

    tinylr = require('tiny-lr'),               //livereload

    server = tinylr(),

    port = 35729,

    livereload = require('gulp-livereload');   //livereload

// HTML处理

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

    var htmlSrc = './src/*.html',

        htmlDst = './dist/';

    gulp.src(htmlSrc)

        .pipe(livereload(server))

        .pipe(gulp.dest(htmlDst))

});

// 样式处理

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

    var cssSrc = './src/scss/*.scss',

        cssDst = './dist/css';

    gulp.src(cssSrc)

        .pipe(sass({ style: 'expanded'}))

        .pipe(gulp.dest(cssDst))

        .pipe(rename({ suffix: '.min' }))

        .pipe(minifycss())

        .pipe(livereload(server))

        .pipe(gulp.dest(cssDst));

});

// 图片处理

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

    var imgSrc = './src/images/**/*',

        imgDst = './dist/images';

    gulp.src(imgSrc)

        .pipe(imagemin())

        .pipe(livereload(server))

        .pipe(gulp.dest(imgDst));

})

// js处理

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

    var jsSrc = './src/js/*.js',

        jsDst ='./dist/js';

    gulp.src(jsSrc)

        .pipe(jshint('.jshintrc'))

        .pipe(jshint.reporter('default'))

        .pipe(concat