使用gulp进行代码压缩

时间：2021-07-06 15:28:59

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任务都写在这个文件里）：

 'use strict';

 var gulp = require('gulp');

 //压缩html

 var htmlmin = require('gulp-htmlmin');

 gulp.task('html', function(){

     gulp.src('./*.html')

         .pipe(htmlmin({

             collapseWhitespace: true,

               removeComments: true

         }))

         .pipe(gulp.dest('dist'));

 });

 //压缩css

 var cssnano = require('gulp-cssnano');

 gulp.task('style', function(){

     gulp.src(['./css/style.css','./css/piano.css'])

         .pipe(cssnano())

         .pipe(gulp.dest('dist/css'));

 });

 //压缩js

 var uglify = require('gulp-uglify');

 gulp.task('script', function(){

     gulp.src(['./js/common.js','./js/piano.js'])

         .pipe(uglify())

         .pipe(gulp.dest('dist/js'));

 });

 //同步代码变化

 gulp.task('dist', function(){

     gulp.watch('./*.html', ['html']);

     gulp.watch(['./css/style.css','./css/piano.css'], ['style']);

     gulp.watch(['./js/common.js','./js/piano.js'], ['script']);

 });

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

相关文章