使用gulp进行代码压缩
Posted 明镜止水
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用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 [任务名]
以上是关于使用gulp进行代码压缩的主要内容,如果未能解决你的问题,请参考以下文章