gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。
在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
- 使用 gulp 压缩 JS
- 使用 gulp 压缩 CSS
- 使用 gulp 压缩图片
- 使用 gulp 编译 LESS
- 使用 gulp 编译 Sass
- 使用 gulp 构建一个项目
使用gulp压缩JS
将规律转换为 gulp 代码
现有目录结构如下:
└── js/
└── myDemo.js
规律
- 找到 js/目录下的所有 .js 文件
- 压缩这些 js 文件
- 将压缩后的代码另存在 dist/js/ 目录下
编写 gulp 代码
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
.pipe(uglify({ mangle: false }))
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
})
代码执行结果
代码执行后文件结构
└── js/
│ └── myDemo.js
└── dist/
└── js/
└── myDemo.js
myDemo.js 压缩前
function demo (msg) {
alert('--------\r\n' + msg + '\r\n--------');
console.log("123");
conosle.log("1234");
}
myDemo.js 压缩后
function demo(msg){alert("--------\r\n"+msg+"\r\n--------"),console.log("123"),conosle.log("1234")}
此时
dist/js
目录下的 .js
文件都是压缩后的版本。
还可以监控 js/
目录下的 js 文件,当某个文件被修改时,自动压缩修改文件。启动 gulp 后就可以让它帮助你自动构建 Web 项目。
gulp.task('auto',function(){
gulp.watch('js/*.js',['script']);
})
当执行auto命令后,去修改js文件夹下面的myDemo.js,此时控制台会打印如下信息:表示检测到文件修改并压缩文件
[16:42:49] Using gulpfile ~/Documents/mycode/gulpDemo/gulpfile.js
[16:42:49] Starting 'auto'...
[16:42:49] Finished 'auto' after 10 ms
[16:42:55] Starting 'script'...
也可以使用 gulp.task('default', fn) 定义默认任务
gulp.task('default',['script','auto'])
// 获取 gulp
var gulp = require('gulp');
var uglify = require('gulp-uglify');
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
.pipe(uglify({ mangle: false }))
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
})
gulp.task('auto',function(){
gulp.watch('js/*.js',['script']);
})
注意;在安装gulp和gulp-uglify的时候,需要使用sudo npm install,否则,在执行gulp命令的时候,会报gulp command not found