《Gulp 入门指南》- 前言
gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。
在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
你可以直接访问 GitHub: gulp-book 查看本书
目录
- 安装 Node 和 gulp
- 使用 gulp 压缩 JS
- 使用 gulp 压缩 CSS
- 使用 gulp 压缩图片
- 使用 gulp 编译 LESS
- 使用 gulp 编译 Sass
- 使用 gulp 构建一个项目
将规律转换为 gulp 代码
现有目录结构如下：
└── js/ └── a.js 规律
- 找到 js/目录下的所有 .js 文件
- 压缩这些 js 文件
- 将压缩后的代码另存在 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 还可以做很多事，例如：
- 压缩CSS
- 压缩图片
- 编译Sass/LESS
- 编译CoffeeScript
- markdown 转换为 html
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
