gulp構建工具工作流

enrecul101 發布于2019-08-21 10:52 / 2142人閱讀

摘要：先前學習了但是總是感覺略顯復雜，并且現在很多公司工作流用的比較多，因此就入的坑來踩一踩，技多不壓身，霍霍霍。高效利用強大的工作流，快速的構建項目并減少頻繁的操作。易學通過最少的，掌握毫不費力，構建工作盡在掌握如同一系列流管道。

先前學習了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

創建配置文件
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]);

四、配置文件解讀 1. 第一部分

一堆reqire,是引用gulp相應的插件。在引用之前要確保己經安裝。

2. 第二部分

幾個const,是定義任務名常量，有多幾任務就定義多少常量。

3. 第三部分

幾個task,每個task對應一個任務，具有不同的功能。可以使用 gulp xxx來啟動這個任務。

4. 第四部分

default,是執行gulp之后就會開始的任務常用參數("default",[task1,task2,...],callback[可選])。

五、執行

如果要執行default任務，直接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

如果想要執行單個任務，請輸入 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常見任務 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"));
  });

七、項目地址

gulp-start-kit

GPU云服務器云服務器構建工具 android構建工具自動化構建工具自動化構建鏡像工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86325.html

“流式”前端構建工具——gulp.js 簡介

摘要：流式構建改變了底層的流程控制，大大提高了構建工作的效率和性能，給用戶的直觀感覺就是更快。我的看法關于流式構建，短短幾句話無法講清它的來龍去脈，但是在的世界里，確實是至關重要的。 Grunt 一直是前端領域構建工具（任務運行器或許更準確一些，因為前端構建只是此類工具的一部分用途）的王者，然而它也不是毫無缺陷的，近期風頭正勁的 gulp.js 隱隱有取而代之的態勢。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 評論0 收藏0
使用gulp搭建前端構建工具

摘要：今天跟大家分享的是關于目前自己的公司的項目優化中所使用到的構建工具。在進行基礎鞏固的基礎上，使用構建工具可以在開發的過程中進行部分自動化構建，如對頁面的監聽，對樣式的編譯，對代碼的壓縮與打包。在使用之前，要先對所需要的依賴進行安裝。 Why？今天跟大家分享的是關于目前自己的公司的項目優化中所使用到的gulp構建工具。目前公司對產品的優化決定采用VueJs來進行單頁面開發，無疑這種新的...

_Zhao 2019-08-20 15:45 評論0 收藏0
Javascript五十問——從源頭細說Webpack與Gulp

摘要：前言與是目前圈子內比較活躍的前端構建工具。對于初學者來說，對這二者往往容易認識不清，今天，就從事件的源頭，說清楚與。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。打包后形成的文件出口。前言：Webpack 與 gulp是目前圈子內比較活躍的前端構建工具。網上有很多二者比較的文章，面試中也會經常遇到gulp，Webpack的區別這樣的問題。對于初學者來說，對這二...

lwx12525 2019-08-23 14:47 評論0 收藏0
前端團隊 Gulp & Webpack 工作流 遷移記

摘要：那時候所配置的任務監聽匹配文件的變化自動刷新瀏覽器自動編譯自動補全前綴多雪碧圖合并拼圖等等基于編譯圖片的任務，已經是完全滿足我們的需求了。直至到后來在雪碧圖的合并，多倍圖的輸出上，在上苦苦找尋不了比較完美的解決方案等等。折騰從 2015 到現在，短短的三年內，幾乎每年折騰一下工作流的更新換代。從最早開始使用 Grunt 到 Gulp 再到 Webpack，再到 Rollup，...

Baaaan 2019-08-20 17:17 評論0 收藏0
gulp——用自動化構建工具增強你的工作流程

摘要：概念之前有寫了，現在重新寫感覺二者最終結果雖說相差無幾，但是側重點還是有所不同更偏向于工程化，側重于項目的整個流程控制，你可以二者結合，也可以分開取舍都有利于前端項目的工程化構建安裝全局安裝作為項目的開發依賴安裝在項目根目錄下創建一 gulp概念之前有寫了webpack，現在重新寫gulp感覺二者最終結果雖說相差無幾，但是側重點還是有所不同 webpack更偏向于工程化，gulp側...

geekidentity 2019-08-22 11:15 評論0 收藏0