使用gulp进行代码压缩

gulp是一个很不错的前端自动化工具，能够帮咱们完成一些重复性操做，好比html、css和js代码的压缩、合并、混淆等，虽然这些操做能够经过一些在线工具帮咱们实现，但不断重复地复制粘贴确定比不上一句命令来得方便，因此编写gulp任务能够大大提升程序员的开发效率。

由于gulp依赖于node环境，因此想使用gulp必须先安装好node。另外gulp自己是一个轻量化内核，自身拥有的api很少，因此不少功能须要依赖插件完成。关于html、css和js代码压缩的插件有三个，分别是gulp-htmlmin、gulp-cssnano、gulp-uglify，这三个插件的具体说明能够在npm的官网npmjs.com上查看。

在项目根目录下安装：

npm install --save-dev [xxx]

由于gulp和它的插件都是开发阶段使用的，整个项目并不依赖它们，因此尽可能加上“-dev”。

一下是gulpfile.js主文件（全部gulp任务都写在这个文件里）：

 1 'use strict';
 2 
 3 var gulp = require('gulp');
 4 
 5 //压缩html
 6 var htmlmin = require('gulp-htmlmin');
 7 gulp.task('html', function(){
 8     gulp.src('./*.html')
 9         .pipe(htmlmin({
10             collapseWhitespace: true,
11               removeComments: true
12         }))
13         .pipe(gulp.dest('dist'));
14 });
15 
16 //压缩css
17 var cssnano = require('gulp-cssnano');
18 gulp.task('style', function(){
19     gulp.src(['./css/style.css','./css/piano.css'])
20         .pipe(cssnano())
21         .pipe(gulp.dest('dist/css'));
22 });
23 
24 //压缩js
25 var uglify = require('gulp-uglify');
26 gulp.task('script', function(){
27     gulp.src(['./js/common.js','./js/piano.js'])
28         .pipe(uglify())
29         .pipe(gulp.dest('dist/js'));
30 });
31 
32 //同步代码变化
33 gulp.task('dist', function(){
34     gulp.watch('./*.html', ['html']);
35     gulp.watch(['./css/style.css','./css/piano.css'], ['style']);
36     gulp.watch(['./js/common.js','./js/piano.js'], ['script']);
37 });

执行任务直接在cmd中输入gulp [任务名]