AitSchool

Gulp

基于流的自动化构建工具

gulp 为 Node.js 的套件，所以安装 gulp 前请先安装 Node.js

如何学习

文档文档文档，所以的一切根源都来自于文档。

  1. 文档永远是首选资源。国外技术文档大多英文为主，国内翻译者会把文档翻译成中文文档。可以通过中文文档入门，再通过英文文档看是翻译是否有语意错误或者遗漏的地方。

  2. 开发者笔记。可以在简书、知乎搜多相关开发者的笔记，笔记是开发者看文档后的小结，有一定意义的借鉴作用，但要注意版本问题。

  3. 开发问题。可以在其 Github 、stackoverflow 或者 思否，查询开发者在使用这个工具、插件、库时候遇到的问题。

  4. 视频辅助。查看录制视频。

  5. 请教身边的小伙伴。

  6. 参照 DEMO 体验完成。

学习建议

  1. 查看官网文档 - 入门指南，了解 Glup 运行的方式。

  2. 查看官方文档 - API，了解.src, .watch, .dest, 方法概念。

  3. 了解 Gulp 的常用插件包，当我们想去做某件事情的时候，可以在插件主站上搜索，然后点击去查看插件文档了解其插件的使用方法，例如我们想使用 Less ，我们就输入 gulp-less 就可以看到众多与 Less 相关的 gulp 插件。

  4. 按照 gulp-less 文档，配置 Less 相关的文件转译体验。

  5. 在 ES6 转译 ES5 的插件中，Babel 当前最主流的插件，登录 Babel 官网查看，点击文档中配置 ,在选择你的工具中构建系统选择 Gulp 然后按指示配置。

  6. 体验以下DEMO，和使用了那些插件做了些什么，为什么要这么写。之后保证在不看 DEMO 的前提下也能配置出自己的 Glup 打包配置方案，对 Less/Sass 及 ES6 进行转译处理。

如果通过文档的方式不能深入理解，请领取视频配合学习。

DEMO

通过以下事例子，完成一个 JavaScript ES6 及 Less 的开发环境配置。

  1. 全局安装 gulp
npm install gulp-cli -g
  1. 创建项目文件夹并进入
cd ~/Desktop && mkdir gulp-init && cd gulp-init
  1. 初始化 package ，输入命令后一路回车。
npm init
  1. 下载各种依赖包，其中包括

  • gulp

  • gulp-rename

  • gulp-header

  • 用于 ES6 转译

    • gulp-babel@next
    • @babel/core
    • @babel/preset-env

  • 用于 压缩

    • gulp-uglify

  • 用于 Less 转译

    • gulp-less
    • gulp-postcss
    • gulp-cssnano
    • autoprefixer
npm install gulp gulp-rename gulp-header gulp-babel@next @babel/core @babel/preset-env  gulp-uglify gulp-postcss gulp-less gulp-cssnano autoprefixer --save-dev

Gulp 使用 ES6 转译更多内容，可以到 babel 官网查看

Gulp 处理 Less 之后，使用了 postcss 对其进行了其他优化，例如 cssnano 代码优化 及 autoprefixer 后缀添加。

  1. 在根目录下创建 .babelrc 文件，并编辑
touch .babelrc

{
  "presets": ["@babel/preset-env"]
}
  1. 在根目录创建开发环境目录 src , 并在 src 文件夹中 创建 js / less / images 文件夹
mkdir src && cd src && mkdir js & mkdir less
  1. 在 /src/js 文件夹中 创建 index.js 并编辑
touch index.js

let test = () => console.log('ok');
test();
  1. 在 /src/less 文件夹中 创建 index.less 并编辑
touch index.less

.xxx-section{
  color: #333;
  .xxx-list{
    transform: translate(-50%);
  }
}

  1. 在 /src/images 文件夹中添加任意一张图片 例如 avatar.png

  2. 在根目录创建 gulpfile.js , Gulp 运行主文件。

touch gulpfile.js

const { src, dest, parallel, watch } = require('gulp');
const header  = require('gulp-header');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const less    = require('gulp-less');
const rename  = require('gulp-rename');
const postcss = require('gulp-postcss');
const cssnano = require('gulp-cssnano');
const autoprefixer = require('autoprefixer');
const pkg = require('./package.json');

var banner = [
    '/*!',
    ' * <%= pkg.name %> v<%= pkg.version %>',
    ' * Copyright <%= new Date().getFullYear() %> Jaxzhu, Inc.',
    ' * Licensed under the <%= pkg.license %> license',
    ' */',
    ''
].join('\n');

function script() {
  return src('src/js/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(header(banner, { pkg: pkg }))
    .pipe(dest('./dist/js'));
}

function style(){
  return src('src/less/*.less')
    .pipe(less())
    .pipe(postcss([autoprefixer(['iOS >= 8', 'Android >= 4.1'])]))
    .pipe(
      cssnano({
        zindex: false,
        autoprefixer: false,
        reduceIdents: false,
        discardComments: { removeAll: true }
      })
    )
    .pipe(
      rename(function(path) {
        path.extname = '.min.css';
      })
    )
    .pipe(header(banner, { pkg: pkg }))
    .pipe(dest('./dist/css'));
}

function images() {
  return  src('src/images/*')
    .pipe(dest('./dist/images'));
}

function watchAll() {
  return watch('src/**', parallel(script, style, images))
}

exports.script = script;
exports.style = style;
exports.images = images;
exports.default = watchAll;
  1. bash 进入项目更目录中运行 gulp , 观察生成 dist 文件夹的各个文件。
gulp
  1. 参考代码地址
https://github.com/zhuayu/gulp4-init

← webpack →