当前位置:  首页>> 技术小册>> Gulp入门指南

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

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

将规律转换为 gulp 代码
现有目录结构如下:

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

规律
找到 js/目录下的所有 .js 文件
压缩这些 js 文件
将压缩后的代码另存在 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. }
  4. demo('Hi')

a.js 压缩后

function demo(n){alert(“————\r\n”+n+”\r\n————“)}demo(“Hi”);
此时 dist/js 目录下的 .js 文件都是压缩后的版本。

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

gulp 还可以做很多事,例如:

  • 压缩CSS
  • 压缩图片
  • 编译Sass/LESS
  • 编译CoffeeScript
  • markdown 转换为 html

该分类下的相关小册推荐:

暂无相关推荐.