gulp构建工具工做流

时间 2019-11-16

标签 gulp 构建工具栏目 JavaScript 繁體版

原文原文链接

先前学习了webpack,可是老是感受webpack略显复杂，而且如今不少公司gulp工做流用的比较多，所以就入gulp的坑来踩一踩，技多不压身，霍霍霍...。
css

1、简介(加强和使你的工做自动化)

1. 使用简单

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

2. 高效

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

3. 高质量

gulp生态圈有至关多优秀的插件以供咱们使用，Gulp 严格的插件指南确保插件如你指望的那样简洁高质得工做。webpack

4. 易学

经过最少的 API，掌握 Gulp 绝不费力，构建工做尽在掌握：如同一系列流管道。git

2、gulp相关api

1. `gulp.src`: 来源

2. `gulp.dest`: 目标

3. `gulp.pipe`: 管道

4. `gulp.watch`: 热加载

5. `gulp.task`: 任务

6. `gulp.task`('default')

默认任务,必须存在es6

3、使用(工做流程)

1. 全局安装gulp

npm install -g gulpgithub

2. 创建项目

mkdir gulp-test && cd gulp-testweb

3. 初始化项目

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

4. 安装项目依赖

npm install --save-dev gulpjson

建立配置文件
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进来，这种方式适合多人同时书写任务时，能够防止多人修改同一文件致使的冲突）

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]);

4、配置文件解读

1. 第一部分

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

2. 第二部分

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

3. 第三部分

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

4. 第四部分

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

5、执行

若是要执行default任务，直接gulp

[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

[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

6、gulp常见任务

1. 处理js

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

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

// 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

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

4. 测试

gulp-jasmine

// 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

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

6. 热加载

gulp-util gulp-watch

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

//下载
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

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. 复制静态资源

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

10. 处理css雪碧图

gulp-css-spriter

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

gulp.task(gulp_minify_css,function () {
     return gulp.src('./dist/*.css')
         .pipe(print())
         .pipe(minifycss())
         .pipe(gulp.dest(config.dist))
  });

12. 压缩图片

gulp-imagemin

// 压缩图片
  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

// 检查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

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

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'));
  });

7、项目地址

gulp-start-kit