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