gulp构建工具工作流

enrecul101 发布于2019-08-21 10:52 / 2126人阅读

摘要：先前学习了但是总是感觉略显复杂，并且现在很多公司工作流用的比较多，因此就入的坑来踩一踩，技多不压身，霍霍霍。高效利用强大的工作流，快速的构建项目并减少频繁的操作。易学通过最少的，掌握毫不费力，构建工作尽在掌握如同一系列流管道。

先前学习了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构建工具自动化构建工具自动化构建镜像工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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