• gulp 入门指南
    • 目录
    • 将规律转换为 gulp 代码
      • 规律
      • 编写 gulp 代码
      • 代码执行结果

    gulp 入门指南

    gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。

    在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

    点击右上角的 Watch 订阅本书，点击 Star 收藏本书。

    • 订阅本书
    • 论坛

    因为 Node 的全局包安装都是在C盘，所有请在C盘使用 gulp 以方便熟悉 gulp

    相关教程：webpack-book

    目录

    • 安装 Node 和 gulp
    • 使用 gulp 压缩 JS
    • 使用 gulp 压缩 CSS
    • 使用 gulp 压缩图片
    • 使用 gulp 编译 LESS
    • 使用 gulp 编译 Sass
    • 使用 gulp 构建一个项目

    将规律转换为 gulp 代码

    现有目录结构如下：

    1. └── js/
    2.     └── a.js

    规律

    1. 找到 js/目录下的所有 .js 文件
    2. 压缩这些 js 文件
    3. 将压缩后的代码另存在 dist/js/ 目录下

    编写 gulp 代码

    1. // 压缩 JavaScript 文件
    2. gulp.task('script', function() {
    3.     // 1. 找到
    4.     gulp.src('js/*.js')
    5.     // 2. 压缩
    6.         .pipe(uglify())
    7.     // 3. 另存
    8.         .pipe(gulp.dest('dist/js'));
    9. });

    代码执行结果

    代码执行后文件结构

    1. └── js/
    2. │   └── a.js
    3. └── dist/
    4.     └── js/
    5.         └── a.js

    a.js 压缩前

    1. function demo (msg) {
    2.     alert('--------\r\n' + msg + '\r\n--------')
    3. }
    5. demo('Hi')

    a.js 压缩后

    1. function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");

    此时 dist/js 目录下的 .js 文件都是压缩后的版本。

    你还可以监控 js/ 目录下的 js 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它帮助你自动构建 Web 项目。

    gulp 还可以做很多事，例如：

    1. 压缩CSS
    2. 压缩图片
    3. 编译Sass/LESS
    4. 编译CoffeeScript
    5. markdown 转换为 html

    开始阅读：安装 Node 和 gulp