gulp的学习使用

一、什么是gulp

       gulp.js 是一种基于流的，代码优于配置的新一代构建工具。

     gulp 和 grunt 类似。但相比于 Grunt 的频繁的 IO 操作，Gulp 的流操作，能更快地完成构建。

    Gulp本身虽然不能完成很多任务，但它     有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如，有些插件可以用来执行JSHint、编译CoffeeScript，执行Mocha测试，甚至更新版本号。

二、安装gulp

     

    首先，需要在全局安装Gulp包：

     npm install -g gulp

  然后，在项目里面安装Gulp：

npm install --save-dev gulp

三、使用gulp

   Gulp的任务都是以插件的形式存在，所以首先安装插件，这里用jshint为例：

          npm install gulp-jshint --save-dev

         安装之后需要在文件夹下建立一个名为“gulpfile.js”的文件，文件内书写程序：

   

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

var paths = {
  scripts: 'js/**/*.js',
};

gulp.task('lint', function() {
  return gulp.src(paths.scripts)
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

运行：$ gulp lint 

 四、常用插件

      上面演示了jshint插件的使用，其他gulp的插件的使用与之类似。

       常用的gulp插件还有：

    "gulp-angular-filesort"
    "gulp-angular-templatecache"
    "gulp-babel"
    "gulp-cached"
    "gulp-compass"
    "gulp-concat"
    "gulp-consolidate"
    "gulp-csso"
    "gulp-eslint“
    "gulp-expect-file"
    "gulp-filename-sort"
    "gulp-filter"
    "gulp-flatten"
    "gulp-if"
    "gulp-imagemin"
    "gulp-inject"
    "gulp-less"
    "gulp-livereload"
    "gulp-load-plugins"
    "gulp-markdown"
    "gulp-minify-html"
    "gulp-ng-annotate"
    "gulp-nodemon"
    "gulp-order"
    "gulp-rename"
    "gulp-replace"
    "gulp-rev"
    "gulp-rev-replace"
    "gulp-size"
    "gulp-sourcemaps"
    "gulp-task-listing"
    "gulp-uglify"
    "gulp-useref"
    "gulp-util"
    "gulp-wait"

每个插件的功能自行百度啦......

五、gulp插件组合使用

        

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

比grunt的使用简便好多吧!

六、gulp优点

使用方便
通过代码优于配置的策略，Gulp可以让简单的任务简单，复杂的任务更可管理。
构建快速
通过流式操作，减少频繁的 IO 操作，更快地构建项目。
插件高质
Gulp 有严格的插件指导策略，确保插件能简单高质的工作。
易于学习
少量的API，掌握Gulp可以毫不费力。构建就像流管道一样，轻松加愉快。