Gulp 入门指南
Switch branches/tags
Nothing to show
Clone or download
nimojs 使用 gulp 压缩 CSS
gulp-clean-css 提示
Latest commit 51854f5 Feb 17, 2017
Permalink
Failed to load latest commit information.
demo fix: url Dec 18, 2015
.gitignore Revert "Node modules" May 8, 2015
README.md 增加 webpack-book 链接 Jun 12, 2016
SUMMARY.md
chapter1.md 安装 Node 和 gulp Jun 12, 2015
chapter2.md type error Jul 25, 2016
chapter3.md 使用 gulp 压缩 CSS Feb 17, 2017
chapter4.md fix "npm instal" to "npm install" Jan 20, 2016
chapter5.md 注释有误 Aug 31, 2015
chapter6.md 不建议使用 sass ,建议使用 less Jul 7, 2016
chapter7.md 使用 gulp 构建一个项目 Jun 13, 2015

README.md

gulp 入门指南

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

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

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

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

相关教程:webpack-book

目录

将规律转换为 gulp 代码

现有目录结构如下:

└── js/
    └── a.js

规律

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

编写 gulp 代码

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

代码执行结果

代码执行后文件结构

└── js/
│   └── a.js
└── dist/
    └── js/
        └── a.js

a.js 压缩前

function demo (msg) {
    alert('--------\r\n' + msg + '\r\n--------')
}

demo('Hi')

a.js 压缩后

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