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 文件

将压缩后的代码另存在 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'])

// 获取 gulpvar 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

转载于:https://www.cnblogs.com/yub-fan/p/6543986.html

你可能感兴趣的文章