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

规律

1. 找到 js/目录下的所有 .js 文件
2. 压缩这些 js 文件
3. 将压缩后的代码另存在 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