gulp構(gòu)建工具工作流

enrecul101 發(fā)布于2019-08-21 10:52 / 2146人閱讀

摘要：先前學(xué)習(xí)了但是總是感覺(jué)略顯復(fù)雜，并且現(xiàn)在很多公司工作流用的比較多，因此就入的坑來(lái)踩一踩，技多不壓身，霍霍霍。高效利用強(qiáng)大的工作流，快速的構(gòu)建項(xiàng)目并減少頻繁的操作。易學(xué)通過(guò)最少的，掌握毫不費(fèi)力，構(gòu)建工作盡在掌握如同一系列流管道。

先前學(xué)習(xí)了webpack,但是總是感覺(jué)webpack略顯復(fù)雜，并且現(xiàn)在很多公司gulp工作流用的比較多，因此就入gulp的坑來(lái)踩一踩，技多不壓身，霍霍霍...。

一、簡(jiǎn)介(增強(qiáng)和使你的工作自動(dòng)化) 1. 使用簡(jiǎn)單

沒(méi)有繁瑣的配置，一個(gè)任務(wù)一個(gè)task。通過(guò)代碼優(yōu)于配置的策略，Gulp 讓簡(jiǎn)單的任務(wù)簡(jiǎn)單，復(fù)雜的任務(wù)可管理。

2. 高效

利用node強(qiáng)大的工作流，快速的構(gòu)建項(xiàng)目并減少頻繁的 IO 操作。

3. 高質(zhì)量

gulp生態(tài)圈有相當(dāng)多優(yōu)秀的插件以供我們使用，Gulp 嚴(yán)格的插件指南確保插件如你期望的那樣簡(jiǎn)潔高質(zhì)得工作。

4. 易學(xué)

通過(guò)最少的 API，掌握 Gulp 毫不費(fèi)力，構(gòu)建工作盡在掌握：如同一系列流管道。

二、gulp相關(guān)api 1. gulp.src: 來(lái)源 2. gulp.dest: 目標(biāo) 3. gulp.pipe: 管道 4. gulp.watch: 熱加載 5. gulp.task: 任務(wù) 6. gulp.task("default")

默認(rèn)任務(wù),必須存在

三、使用(工作流程) 1. 全局安裝gulp

npm install -g gulp

2. 建立項(xiàng)目

mkdir gulp-test && cd gulp-test

3. 初始化項(xiàng)目

npm init -y (會(huì)生成package.json)

4. 安裝項(xiàng)目依賴

npm install --save-dev gulp

創(chuàng)建配置文件
touch gulpfile.js

6. gulp常用的功能

轉(zhuǎn)碼（gulp-babel babel-preset-es2015 gulp-sass gulp-less gulp-react）、合并（gulp-concat）、壓縮（gulp-uglify）、模塊化（gulp-browserify）、測(cè)試（gulp-jasmine），請(qǐng)依次安裝這些依賴。

7. 小常識(shí)

因?yàn)閲?guó)外的網(wǎng)站比較慢 npm經(jīng)常會(huì)卡住。我們可以設(shè)置鏡像源或使用cnpm或者設(shè)置鏡像源npm config set registry https://registry.npm.taobao.org

8. 寫(xiě)配置

（gulpfile一定有一個(gè)default的任務(wù)，你可以把每個(gè)任務(wù)分文件書(shū)寫(xiě)然后再require進(jìn)來(lái)，這種方式適合多人同時(shí)書(shū)寫(xiě)任務(wù)時(shí)，可以防止多人修改同一文件導(dǎo)致的沖突）

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相應(yīng)的插件。在引用之前要確保己經(jīng)安裝。

2. 第二部分

幾個(gè)const,是定義任務(wù)名常量，有多幾任務(wù)就定義多少常量。

3. 第三部分

幾個(gè)task,每個(gè)task對(duì)應(yīng)一個(gè)任務(wù)，具有不同的功能。可以使用 gulp xxx來(lái)啟動(dòng)這個(gè)任務(wù)。

4. 第四部分

default,是執(zhí)行gulp之后就會(huì)開(kāi)始的任務(wù) 常用參數(shù)("default",[task1,task2,...],callback[可選])。

五、執(zhí)行

如果要執(zhí)行default任務(wù)，直接gulp

  [09:56:04] Using gulpfile e:oscchinagulp-start-kitgulpfile.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

如果想要執(zhí)行單個(gè)任務(wù)，請(qǐng)輸入 gulp taskName,例如gulp test

  [09:56:47] Using gulpfile e:oscchinagulp-start-kitgulpfile.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常見(jiàn)任務(wù) 1. 處理js

（包括轉(zhuǎn)碼、合并、壓縮） 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

(包括轉(zhuǎn)碼、合并、壓縮) 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

(包括轉(zhuǎn)碼、合并、壓縮) gulp-less gulp-concat gulp-uglify

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

4. 測(cè)試

gulp-jasmine

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

  //測(cè)試文件 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");
// 注冊(cè)任務(wù)
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. 復(fù)制靜態(tài)資源

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

七、項(xiàng)目地址

gulp-start-kit