构建工具Gulp-lesson5

Gulp 插件列表：https://gulpjs.com/plugins/

这一节我们将从下面这一段代码开始增加内容，来看一下 gulp 的一些产能常用插件和使用的方式。

代码语言：javascript复制

const { src, dest } = require("gulp");

function build() {
  return src("src/*.js").pipe(dest("output"));
}

exports.default = build;

gulp-rename：

可以便捷的在输出编译产物到文件中时对文件命名进行调整，已适应不同的场景。

代码语言：javascript复制

const rename = require("gulp-rename");

使用固定命名输出：

安装管道：rename('main.js')；

代码语言：javascript复制

function build() {
  return src("src/*.js")
  .pipe(rename('main.js'))
  .pipe(dest("output"));
}

增加特定的标识：

为 rename 的参数提供一个函数，在执行到这个函数时会传入一个 path 对象，包含dirname、basename、extname三个属性，我们这里动态修改basename，为其增加一个当前编译的时间。需要注意的是 return 的结果需要包含 path 完整的三个属性，未修改的我们可以使用结构来赋值。

代码语言：javascript复制

function build() {
  const localTime = new Date().toLocaleTimeString();
  return src("src/*.js")
    .pipe(
      rename(function (path) {
        return {
          ...path,
          basename: `${path.basename}-${localTime}`,
        };
      })
    )
    .pipe(dest("output"));
}

还有一个方式就是我们直接修改传入的 path 的值而不去 return 一个全新的对象。

代码语言：javascript复制

function build() {
  const localTime = new Date().toLocaleTimeString();
  return src("src/*.js")
    .pipe(
      rename(function (path) {
        path.basename  = `-${localTime}`;
      })
    )
    .pipe(dest("output"));
}

gulp-uglify：

可以在我们构建 JavaScript 代码后进行压缩来减小输出产物的体积。

代码语言：javascript复制

const uglify = require('gulp-uglify');

代码语言：javascript复制

function build() {
  const localTime = new Date().toLocaleTimeString();
  return src("src/*.js")
  .pipe(uglify())
  .pipe(dest("output"));
}

gulp-sass：

将我们编写的 sass 文件编译为浏览器可以正常识别的 css 文件，我们要同时安装 sass 和 gulp-sass 插件。

代码语言：javascript复制

const sass = require('gulp-sass')(require('sass'));

下面的代码是 sass 教程的第一块内容，将变量插入到最后编译的结果中。

代码语言：javascript复制

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

改变我们的 build 任务函数后执行 gulp 得到的产物与