gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。
在 Web前端开发工作中有很多“无脑工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码。
目录:
- 安装 Node 和 gulp
- 使用 gulp 压缩 JS
- 使用 gulp 压缩 CSS
- 使用 gulp 压缩图片
- 使用 gulp 编译 LESS
- 使用 gulp 编译 Sass
- 使用 gulp 开发一个项目
点击此处发帖告诉我,你还需要哪些新章节。(https://github.com/nimojs/gulp-book/issues) 压缩JS文件的规律和 gulp 代码
现有目录结构如下:
└── js/
├── index.js
└── page-a.js
- 找到 js/目录下的所有 .js 文件
- 压缩这些 js 文件
- 将压缩后的代码另存在 dist/js/ 目录下
// 压缩文件
gulp.task('script', function() {
// 1. 找到
gulp.src('js/*.js')
// 2. 压缩
.pipe(uglify())
// 3. 另存
.pipe(gulp.dest('dist/js'));
});
代码执行后文件结构
└── js/
│ ├── index.js
│ └── page-a.js
└── dist/
└── js/
├── index.js
└── page-a.js
此时 dist/js
目录下的 .js
文件都是压缩后的版本。
gulp 还可以做很多事,例如:
- 压缩CSS
- 压缩图片
- 编译Sass/LESS
- 编译CoffeeScript
- markdown 转换为 html