gulp构建工具的使用

先前学习了webpack,但是总是感觉webpack略显复杂，并且现在很多公司gulp工作流用的比较多，因此就入gulp的坑来踩一踩，技多不压身，霍霍霍…。

一、简介(增强和使你的工作自动化)

1. 使用简单

没有繁琐的配置，一个任务一个task。通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

2. 高效

利用node强大的工作流，快速的构建项目并减少频繁的 IO 操作。

3. 高质量

gulp生态圈有相当多优秀的插件以供我们使用，Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

4. 易学

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

二、gulp相关api

1. `gulp.src`: 来源

2. `gulp.dest`: 目标

3. `gulp.pipe`: 管道

4. `gulp.watch`: 热加载

5. `gulp.task`: 任务

6. `gulp.task`(‘default’)

默认任务,必须存在

三、使用(工作流程)

1. 全局安装gulp

npm install -g gulp

2. 建立项目

mkdir gulp-test && cd gulp-test

3. 初始化项目

npm init -y (会生成package.json)

4. 安装项目依赖

npm install --save-dev gulp 5. 创建配置文件 touch gulpfile.js

6. gulp常用的功能

转码（gulp-babel babel-preset-es2015 gulp-sass gulp-less gulp-react）、合并（gulp-concat）、压缩（gulp-uglify）、模块化（gulp-browserify）、测试（gulp-jasmine），请依次安装这些依赖。

7. 小常识

因为国外的网站比较慢 npm经常会卡住。我们可以设置镜像源或使用cnpm或者设置镜像源npm config set registry https://registry.npm.taobao.org

8. 写配置

（gulpfile一定有一个default的任务，你可以把每个任务分文件书写然后再require进来，这种方式适合多人同时书写任务时，可以防止多人修改同一文件导致的冲突）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var gulp = require("gulp");
var babel = require("gulp-babel");
var react = require("gulp-react");
var sass = require("gulp-sass");
var less = require("gulp-less");
var uglify = require("gulp-uglify");
var jasmine = require("gulp-jasmine");
var concat = require("gulp-concat");

//定义常量
const transformJs = "transformJs";
const transformSass = "transformSass";
const transformLess = "transformLess";
const test = 'test';


//js
gulp.task(transformJs, function () {
    return gulp.src("src/*.js")
        .pipe(react())
        .pipe(babel(
            {
                presets: ["babel-preset-es2015"]
            }
        ))
        .pipe(concat('bundle.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest("./dist"))
});

// scss
gulp.task(transformSass, function () {
    return gulp.src("src/css/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./dist"))
});


// less
gulp.task(transformLess, function () {
    return gulp.src("src/css/*.less")
        .pipe(less())
        .pipe(gulp.dest("./dist"))
});


// jasmine
gulp.task(test, function () {
    return gulp.src("./test/*.js")
        .pipe(jasmine())
});

gulp.task("default", [transformJs, transformSass, transformLess, test]);

四、配置文件解读

1. 第一部分

一堆reqire,是引用gulp相应的插件。在引用之前要确保己经安装。

2. 第二部分

几个const,是定义任务名常量，有多几任务就定义多少常量。

3. 第三部分

几个task,每个task对应一个任务，具有不同的功能。可以使用 gulp xxx来启动这个任务。

4. 第四部分

default,是执行gulp之后就会开始的任务常用参数('default',[task1,task2,...],callback[可选])。

五、执行

如果要执行default任务，直接gulp

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  [09:56:04] Using gulpfile e:\oscchina\gulp-start-kit\gulpfile.js
  [09:56:04] Starting 'transformJs'...
  [09:56:04] Starting 'transformSass'...
  [09:56:04] Starting 'transformLess'...
  [09:56:04] Starting 'test'...
  .

  1 spec, 0 failures
  Finished in 0 seconds
  [09:56:04] Finished 'test' after 62 ms
  [09:56:06] Finished 'transformLess' after 2.66 s
  [09:56:06] Finished 'transformSass' after 2.68 s
  [09:56:06] Finished 'transformJs' after 2.7 s
  [09:56:06] Finished 'default' after 32 μs

  Process finished with exit code 0

如果想要执行单个任务，请输入 gulp taskName,例如gulp test

1
2
3
4
5
6
7
8
9
  [09:56:47] Using gulpfile e:\oscchina\gulp-start-kit\gulpfile.js
  [09:56:47] Starting 'test'...
  .

  1 spec, 0 failures
  Finished in 0 seconds
  [09:56:47] Finished 'test' after 77 ms

  Process finished with exit code 0

六、gulp常见任务

1. 处理js

（包括转码、合并、压缩） gulp-babel babel-preset-es2015 gulp-concat gulp-uglify

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
gulp.task(transformJs, function () {
  return gulp.src("src/*.js")
      .pipe(react())
      .pipe(babel(
          {
              presets: ["babel-preset-es2015"]
          }
      ))
      .pipe(concat('bundle.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest("./dist"))
});

2. 处理scss

(包括转码、合并、压缩) gulp-sass gulp-concat gulp-uglify

1
2
3
4
5
6
  // scss
  gulp.task(transformSass, function () {
      return gulp.src("src/css/*.scss")
          .pipe(sass())
          .pipe(gulp.dest("./dist"))
  });

3. 处理less

(包括转码、合并、压缩) gulp-less gulp-concat gulp-uglify

1
2
3
4
5
6
  // less
  gulp.task(transformLess, function () {
    return gulp.src("src/css/*.less")
        .pipe(less())
        .pipe(gulp.dest("./dist"))
  });

4. 测试

gulp-jasmine

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  // jasmine
  gulp.task(test, function () {
      return gulp.src("./test/*.js")
          .pipe(jasmine())
  });

  //测试文件 test.spec.js
  describe('test one', function () {
      it('test', function () {
          expect(true).toBe(true);
      })
  });

5. 清理

gulp-clean

1
2
3
4
gulp.task('clean', function () {
  return gulp.src(config.dist + '/*', {read: false})
      .pipe(clean());
});

6. 热加载

gulp-util gulp-watch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  var util = require('gulp-util');
  var watch = require('gulp-watch');
  var config = {};
  config.dist = 'dist';
  config.static = [
    'bin/**/*',
    'package.json'
  ];
  // sync static resource in production mode
  gulp.task('static-sync', function () {
    return gulp.src(config.static, {base: './'})
        .pipe(gulp.dest(config.dist));
  });

  gulp.task('static-sync:dev', ['static-sync'], function () {
    util.log('[Sync] starting file watch');
    return watch(config.static, function (obj) {
      if (obj.event === 'change' || obj.event === 'add')
        return gulp.src(obj.path, {base: './'})
            .pipe(gulp.dest(config.dist))
            .pipe(print(function () {
              return '[Sync] file sync success: ' + obj.path.replace(obj.base, '');
            }));
      else if (obj.event === 'unlink') {
        var distFilePath = obj.path.replace(__dirname, __dirname + '/' + config.dist);
        return gulp.src(distFilePath)
            .pipe(clean())
            .pipe(print(function () {
              return '[Sync] file remove success: ' + obj.path.replace(obj.base, '');
            }));
      }
    });
  });

7. debug

gulp-print

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
//下载
npm install gulp-print
//引用
var gulp = require('gulp');
var print = require('gulp-print');
// 注册任务
gulp.task('print', function() {
  gulp.src('test/*.js')
    .pipe(print())
});

8. sourceMap

gulp-sourcemaps

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  var sourcemaps = require('gulp-sourcemaps');
  // compile server script in production mode
  gulp.task('compile:server', function () {
    if (config.babel.sourceMaps){
      return gulp.src('**/*.es6', {base: './'})
          .pipe(sourcemaps.init())
          .pipe(babel(config.babel))
          .pipe(sourcemaps.write('.', {sourceRoot: '/ustar'}))
          .pipe(gulp.dest(config.dist));
    }else{
      return gulp.src('**/*.es6', {base: './'})
          .pipe(babel({
            preset:'babel-preset-es2015'
            }))
          .pipe(gulp.dest('./dist'));
  });

9. 复制静态资源

1
2
3
4
gulp.task('static-sync', function () {
    return gulp.src('src/css/*', {base: './'})
        .pipe(gulp.dest('./dist'));
});

10. 处理css雪碧图

gulp-css-spriter

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
  var gulp = require('gulp');
  var spriter = require('gulp-css-spriter');

  gulp.task('css', function() {
    return gulp.src('./src/css/styles.css')
        .pipe(spriter({
            // The path and file name of where we will save the sprite sheet
            'spriteSheet': './dist/images/spritesheet.png',
            // Because we don't know where you will end up saving the CSS file at this point in the pipe,
            // we need a litle help identifying where it will be.
            'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
        }))
        .pipe(gulp.dest('./dist/css'));
  });

11. 压缩css

gulp-minify-css

1
2
3
4
5
6
  gulp.task(gulp_minify_css,function () {
     return gulp.src('./dist/*.css')
         .pipe(print())
         .pipe(minifycss())
         .pipe(gulp.dest(config.dist))
  });

12. 压缩图片

gulp-imagemin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// 压缩图片
  gulp.task('img', function() {
    return gulp.src('src/images/*')
      .pipe(imagemin({
          progressive: true,
          svgoPlugins: [{removeViewBox: false}],
          use: [pngcrush()]
      }))
      .pipe(gulp.dest('./dest/images/'))
      .pipe(notify({ message: 'img task ok' }));
  });

13. 检查js

gulp-jshint gulp-jshint

1
2
3
4
5
6
7
// 检查js
  gulp.task('lint', function() {
    return gulp.src('src/js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(notify({ message: 'lint task ok' }));
  });

14. gzip压缩

gulp-gzip

1
2
3
4
5
6
7
8
  var gulp = require('gulp');
  var gzip = require('gulp-gzip');

  gulp.task('compress', function() {
      gulp.src('./dev/scripts/*.js')
      .pipe(gzip())
      .pipe(gulp.dest('./public/scripts'));
  });

15. 处理前缀

gulp-autoprefixer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
  var gulp = require('gulp');
  var autoprefixer = require('gulp-autoprefixer');

  gulp.task('default', function () {
    return gulp.src('src/app.css')
      .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(concat('all.css'))
        .pipe(sourcemaps.write('.',{sourceRoot:config.dist}))
        .pipe(gulp.dest('dist'));
  });

七、项目地址

gulp-start-kit