gulp 入门---使用gulp压缩JS
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