Gulp基础

Gulp

中文网

自动化构建工具：压缩js、压缩css、处理图像、编译sass/less资源，形成完整的构建流程等

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

全局安装 gulp-cli

全局安装 gulp-cli 命令行工具：

$ npm i gulp-cli -g

安装完成后，使用 gulp --verion 测试：

$ gulp --version

如果能够看到类似如下提示，则说明安装成功：

CLI version: 2.3.0
Local version: Unknown

注意：全局安装 gulp-cli 只需要执行一次即可

创建项目与 package.json 文件

$ mkdir gulp-demo
$ cd gulp-demo
$ npm init -y

本地安装 gulp

本地安装 gulp 包资源：

$ npm i gulp --save-dev
# 或
$ npm i gulp -D

本地安装gulp完毕后，可执行 gulp --version 查看版本：

$ gulp --verion

CLI version: 2.3.0
Local version: 4.0.2

创建 gulpfile.js 文件

在项目根目录（与 package.json 文件同目录）中创建 gulpfile.js 文件，该文件是 gulp 工具的配置文件，用于定义各种自动化构建任务：

function defaultTask(cb) {
  // place code for your default task here
  console.log('执行默认任务...')
  cb();
}

exports.default = defaultTask

exports.default 是导出默认任务

测试默认任务

在命令行中，项目根目录下，执行 gulp 命令：

$ gulp

类似看到如下执行结果：

[11:16:22] Using gulpfile D:\courses\cd-2107\JavaScript\week-06\day05-gulp\gulp-demo\gulpfile.js
[11:16:22] Starting 'default'...
执行默认任务...
[11:16:22] Finished 'default' after 8.23 ms

可以使用 gulp <task-name> 来执行其它任务，如：

$ gulp uglifyjs

任务名称是在 gulpfile.js 文件中 exports.xxx 时定义的名称

定义 gulp 任务

gulp 任务的执行通常是结合相关插件来完成

压缩 js 任务

安装 gulp-uglify 插件：

$ npm install --save-dev gulp-uglify
# 或
$ npm i gulp-uglify -D

定义 gulpfile.js 文件中的任务：

// 引入包资源
const gulp = require('gulp')
const uglify = require('gulp-uglify')

// 定义变量，保存各种资源的路径
const paths = {
  js: {
    src: 'src/js/**/*.js', // js 文件的源路径
    dest: 'dist/js' // js 处理后的目标路径
  }
}

// 定义任务函数
function scripts() {
  return gulp.src(paths.js.src)
    .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
}

// 导出任务
exports.scripts = scripts

执行任务：

$ gulp scripts

压缩 css 任务

插件：gulp-clean-css

$ npm install gulp-clean-css --save-dev

压缩 html 任务

插件：gulp-htmlmin

$ npm install --save-dev gulp-htmlmin

转译 js

插件：gulp-babel

$ npm install --save-dev gulp-babel@7 babel-core babel-preset-env

sass 编译

插件：gulp-sass

$ npm install sass gulp-sass --save-dev

流程化

const build = gulp.series(clean, gulp.parallel(styles, scripts, buildScss, html, copyLibs, watch))

SASS

css 预处理器：sass、less、stylus

可以像 JS 编程一样来开发 css

sass 中文网

sass基于Ruby语言开发而成

利用 sass 来编写 css 样式，定义后缀名为 *.scss 的文件，在文件中的代码语法结构与 css 语法结构基本一致。

将编写的 *.scss 文件转换为 *.css 文件的过程称为 “编译”

编译方式：命令行、koala（GUI 图形化用户界面）、grunt、gulp、vscode扩展程序…

编译风格：nested、expanded、compact、compressed

**变量：**使用 $ 符号开头，定义变量，可使用变量复用单个值

嵌套：