gulp基本介绍

1、gulp是什么

gulp就是用来机械化的完成重复性质（如less->css；js、css压缩；js混淆）的工做；gulp的机制就是将重复工做抽象成一个个的任务。

2、gulp使用

a.首先确保电脑上已经正确安装了node环境；

b.其次再全局安装gulp，命令行语句：npm install -g gulp；

c.在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是固定的；d.在gulpfile中抽象咱们须要作的任务。

小案例：

'use strict';
//在gulpfile中先载入gulp包，由于这个包提供了一些API
var gulp=require('gulp');
var less=require('gulp-less');
var cssnano=require('gulp-cssnano');
var concat=require('gulp-concat');
//1.less编译 压缩 合并:此处没有演示导包，由于通常预处理css(如less sass)均可以导包
gulp.task('style',function(){//style为任务名
  //这里是在执行style任务时自动执行的
  gulp.src(['src/styles/*.less','!src/styles/_*.less'])//指不获取_*.less
  .pipe(less())
  .pipe(cssnano())//压缩
  //在cmd中执行gult style后会在根目录下自动生成dist/styles/app.css
  .pipe(gulp.dest('dist/styles'))
  .pipe(browserSync.reload({
      stream: true
    }));//从新刷新;
})


//2.JS合并 压缩  混淆
var uglify=require('gulp-uglify');
gulp.task('script',function(){
  gulp.src('src/scripts/*.js')
  .pipe(concat('all.js'))
  .pipe(uglify())
  .pipe(gulp.dest('dist/scripts'))
  .pipe(browserSync.reload({
      stream: true
    }));//从新刷新
  })

//3.图片复制,会在根目录下生成dist/images/pipe.png,即把
//src/images下全部的图片都生成到目录dist/images下
gulp.task('image',function(){
  gulp.src('src/images/*.*')
  .pipe(gulp.dest('dist/images'))
  .pipe(browserSync.reload({
      stream: true
    }));//从新刷新;
})

//4.html
var htmlmin=require('gulp-htmlmin')
gulp.task('html',function(){
  gulp.src('src/*.html')
  .pipe(htmlmin({
    collapseWhitespace:true,//压缩
    removeComments:true//压缩后去掉注释
    }))
  .pipe(gulp.dest('dist'))
  .pipe(browserSync.reload({
      stream: true
    }));//从新刷新
})

//5.server
var browserSync=require('browser-sync');
gulp.task('serve',function(){
  browserSync({
    server:{
      baseDir:['dist']//设置目录
    },
    },function(err,bs){
      console.log(bs.options.getIn(['urls','local']));
      });
//监视文件，当参数1有改变时应该执行参数2任务，每一个任务里须要加pipe(browserSync.reload())
  gulp.watch('src/styles/*.less',['style']);
  gulp.watch('src/scripts/*.js',['script']);
  gulp.watch('src/images/*.*',['image']);
  gulp.watch('src/*.html',['html']);
  })

gulp.task(参1，参2)中第一个参数为任务名称，第二个参数为具体要执行的任务描述。要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，而后在命令行中执行gulp命令就好了，gulp后面能够加上要执行的任务名，例如gulp style，若是没有指定任务名，则会执行任务名为default的默认任务。

3、gulp基本API

1.gulp.src()

Gulp中，使用的是Nodejs中的stream(流)，首先获取到须要的stream，而后能够经过stream的pipe()方法把流导入到你想要的地方，好比Gulp的插件中，通过插件处理后的流又能够继续导入到其余插件中，固然也能够把流写入到文件中。因此Gulp是以stream为媒介的，它不须要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个缘由。再回到正题上来，gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，这个咱们暂时不用去深刻理解，你只需简单的理解能够用这个方法来读取你须要操做的文件就好了。

2.gulp.dest()

gulp.dest()方法是用来写文件的，要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。gulp的使用流程通常是这样子的：首先经过gulp.src()方法获取到咱们想要处理的文件流，而后把文件流经过pipe方法导入到gulp的插件中，最后把通过插件处理后的流再经过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中，这里首先须要弄清楚的一点是，咱们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，因此生成的文件名是由导入到它的文件流决定的，即便咱们给它传入一个带有文件名的路径参数，而后它也会把这个文件名当作是目录名。

3.gulp.task()

gulp.task(name[, deps], fn),其中name为任务的名字，若是你须要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。deps为一个包含任务列表的数组，这些任务会在你当前任务运行以前完成。你的任务是否在这些前置依赖的任务完成以前运行了？请必定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

该函数定义任务所要执行的一些操做。一般来讲，它会是这种形式：gulp.src().pipe(someplugin())。

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行全部的 task 而且不作任何等待。若是你想要建立一个序列化的 task 队列，并以特定的顺序执行，你须要作两件事：

• 给出一个提示，来告知 task 何时执行完毕，
• 而且再给出一个提示，来告知一个 task 依赖另外一个 task 的完成。

对于这个例子，让咱们先假定你有两个 task，"one" 和 "two"，而且你但愿它们按照这个顺序执行：

　　a.在 "one" 中，你加入一个提示，来告知何时它会完成：能够再完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。

　　b.在 "two" 中，你须要添加一个提示来告诉系统它须要依赖第一个 task 完成。

所以，这个例子的实际代码将会是这样：

var gulp = require('gulp');

// 返回一个 callback，所以系统能够知道它何时完成
gulp.task('one', function(cb) {
    // 作一些事 -- 异步的或者其余的
    cb(err); // 若是 err 不是 null 或 undefined，则会中止执行，且注意，这样表明执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行以前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

gulp.task('default', ['one', 'two']);

4.gulp.watch()

gulp.watch()用来监视文件的变化，当文件发生变化后，咱们能够利用它来执行相应的任务。

gulp.watch(glob[,opts],tasks),其中glob为一个字符串或包含多个glob字符串的数组，用来指定具体监控哪些文件的变更。opts一个可选的配置对象，一般不须要用到。tasks为文件变化后要执行的任务，为一个数组。

gulp.watch第三个参数还能够为callback,表明每次变更后须要执行的回调函数，如：

gulp.watch('js/**/*.js', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    //callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变更