gulp，让我们专注于写代码

概念图：

gulp

首先先放上三个问题：

什么是gulp？
为什么是gulp，而不是grunt？
怎么使用gulp？

现在来一一解答上面的问题：

什么是gulp：

gulp简介：

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

简而言之，在工作中，gulp能解决很多需要我们手动处理的操作，像代码的合并、压缩、编译、自动补全等等；

为什么是gulp而不是其他：

gulp和grunt异同点：

易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。
高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。
高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
易于学习：通过把API降到最少（4个），你能在很短的时间内学会Gulp。

grunt:

sass: {
    dist: {
      options: {
        style: 'expanded'
      },
      files: {
        'dist/assets/css/main.css': 'src/styles/main.scss',
      }
    }
},
autoprefixer: {
    dist: {
      options: {
        browsers: [
          'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
        ]
      },
      src: 'dist/assets/css/main.css',
      dest: 'dist/assets/css/main.css'
    }
},
grunt.registerTask('styles', ['sass', 'autoprefixer']);

grunt首先对sass样式文件进行了编译 --> 输出，其次再进行自动补全 --> 输出，最后覆盖css文件。

gulp：

 gulp.task('sass', function() {
        gulp.src('src/styles/main.scss')
          .pipe(sass({ style: 'compressed' }))
          .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
          .pipe(gulp.dest('dist/assets/css'));
      });

gulp引入sass文件，执行编译，其次执行自动补全，最后输出；

** 相比较而言，grunt对特定的任务处理起来相对较凌乱，而且处理的过程中还会产生碎片文件（上例中最后一步覆盖操作）。而gulp处理任务时是one by one，贯彻流的概念在其中，相对逻辑清晰易懂。想必你也大致了解了他们的异同，快来一同进入gulp的世界吧。**

怎么使用gulp：

首先你必须对nodejs中的npm包管理工具有一定的了解，教程可参考链接的1~4小节 >> gulp详细入门教程

确保安装好nodejs后，打开终端（快捷键win+r --> 键入命令cmd并回车），键入如下命令，在全局安装gulp:

npm install gulp -g

接着通过cd定位到项目文件夹根目录（以下操作都基于此目录进行），再键入如下命令，创建packge.json文件：

npm init

packge.json文件实例（* 注意：json文件内是不能写注释的，复制下列内容请删除注释 *）：

{
    "name": "test",   //项目名称（必须）
    "version": "1.0.0",   //项目版本（必须）
    "description": "This is for study gulp project !",   //项目描述（必须）
    "main": "gulpfile.js",   //配置文件
    "devDependencies": {    //项目依赖的插件
        "gulp-cache": "^0.4.3",
        "gulp-imagemin": "^2.4.0",
        "gulp-plumber": "^1.1.0"
    },
    "repository": {    //项目资源库
        "type": "git",
        "url": "https://git.oschina.net/xxxx"
    },
    "author": {    //项目作者信息
        "name": "surging",
        "email": "[email protected]"
    },
    "license": "ISC"    //项目许可协议
}

安装gulp：

npm install gulp -S

安装插件（gulp插件）：

安装之前先对常用插件做个介绍：

gulp-less：less编译；
gulp-imagemin：压缩图片（包括PNG、JPEG、GIF和SVG图片）；
gulp-cache:压缩图片时比较耗时，在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取;
gulp-plumber:编译出现异常不退出监听；
gulp-sourcemaps:该插件能更容易的找到对应的less文件；
gulp-notify:捕获错误，返回错误信息；
gulp-autoprefixer：自动补全浏览器前缀；
gulp-clean-css：压缩css文件
gulp-make-css-url-version：给css文件url地址添加版本号；
gulp-rev-append：给页面的引用添加版本号，清楚页面引用缓存；
gulp-uglify：压缩js文件；
gulp-concat：合并javascript文件，减少网络请求；
gulp-rename：重命名文件；
del：清除文件；

开始安装插件，键入以下命令：

npm install gulp-less -S

5.新建gulpfile.js文件：

    //获取对应模块；
    var gulp = require('gulp'),
        notify = require('gulp-less');
    
    //创建less任务
    gulp.task('less', function(){
      //要处理的less文件路径
      gulp.src('src/less/*.less')
        //编译less
        .pipe(less())
            //输出
        .pipe(gulp.dest(['dist/css', 'src/css']))
    });

    gulp.task('auto', function(){
      //监听less文件，当发生改动时，启动less任务
      gulp.watch('src/less/*.less', ['less']);
    }

    gulp.task('default', ['less', 'auto']);

6.定位到当前项目运行gulp，，键入如下命令：

gulp

7.完整gulpfilejs配置文件：

var gulp = require('gulp'),
        imgMin = require('gulp-imagemin'),
        cache = require('gulp-cache'),
        notify = require('gulp-notify'),
        plumber = require('gulp-plumber'),
        rename = require('gulp-rename'),
        pngquant = require('imagemin-pngquant'),
        uglify = require('gulp-uglify'),
        styles = require('gulp-less'),
        autoprefixer = require('gulp-autoprefixer'),
        cssMin = require('gulp-clean-css'),
        cssver = require('gulp-make-css-url-version'),
        concat = require('gulp-concat'),
        del = require('del');

    gulp.task('imgMin', function(){
        gulp.src('src/img/*.{jpg,png,gif,ico}')
            .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
            .pipe(cache(imgMin({ optimizationLevel: 5, progressive: true, interlaced: true })))
            .pipe(gulp.dest('dist/img'));
    });

    gulp.task('jsMin', function(){
        gulp.src(['src/libs/*.js', 'src/js/*.js'])
            .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
            .pipe(concat('index.js'))
            .pipe(rename({suffix: '.min'}))
            .pipe(uglify({
                mangle: {except: ['require', 'exports', 'module', 'touch', '$']}
            }))
            .pipe(gulp.dest('dist/js'));
    });

    gulp.task('styles', function(){
        gulp.src('src/less/*.less')
            .pipe(styles())
            .pipe(autoprefixer({browsers:['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'Android >=4.0']}))
            .pipe(gulp.dest('src/css'));
    });

    gulp.task('cssMin', ['styles'], function(){
        gulp.src(['src/css/*.css', 'src/libs/*.css'])
            .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
            .pipe(concat('index.css'))
            .pipe(rename({suffix: '.min'}))
            .pipe(cssver())
            .pipe(cssMin({
                advanced: true,
                compatdsibility: 'ie8',
                keepBreaks: false
            }))
            .pipe(gulp.dest('dist/css'));
    });

    gulp.task('watchFile', function(){
        gulp.watch('src/img/*.{jpg,png,gif,ico}', ['imgMin']);
        gulp.watch('src/**/*.js', ['jsMin']);
        gulp.watch('src/**/*.less', ['styles']);
        gulp.watch('src/**/*.css', ['cssMin']);
    });

    gulp.task('del', function(cb){
        del(['dist/css/', 'dist/img', 'dist/js'],cb);
    });

    gulp.task('default', ['del', 'imgMin', 'jsMin', 'cssMin', 'watchFile']);

参考链接：

Gulp 中文网
gulp插件