前言前端技术近几年发展很快，尤其是单页应用的流行。组件化、工程化、自动化已经成为前端发展的趋势。webpack已经成为前端打包构建的主流，但是一些老套的项目依然存在，需要优化。正好公司老项目需要优化，就用gulp来实践一下。本文需要安装node（自行安装），了解gulp入门。Gulp脚本下载：https://github.com/youhunwl/gulp欢迎star。实践中创建项目目录，首先初始化npm依赖和基本信息，使用命令npminit回车生成package.json文件，也可以直接到上述github仓库目录下载。你的项目目录与你的gulp脚本中的任务路径相关，我的脚本中写的是匹配所有目录和文件的。举个简单的例子：js/common中的js文件也会在这里处理。如果只想处理特定目录下的文件，请修改任务中的路径。demo/├──css/│├──index.css├──js/│├──common/││└─common.js│├──index.js├──img/│├──标志。png└──index.html的安装依赖于安装gulp所需的模块。这是我的package.json文件内容的直接列表{"name":"demo","version":"0.0.0","private":true,"dependencies":{},"devDependencies":{"gulp":"^3.9.1","gulp-autoprefixer":"^3.1.1","gulp-cache":"^1.0.2","gulp-clean-css":"^3.10.0","gulp-htmlclean":"^2.7.15","gulp-htmlmin":"^3.0.0","gulp-if":"^2.0.2","gulp-imagemin":"^4.1.0","gulp-minify-css":"^1.2.4","gulp-notify":"^3.0.0","gulp-path":"^3.0.3","gulp-rev-append":"^0.1.8","gulp-sequence":"^0.4.6","gulp-sourcemaps":"^2.6.4","gulp-uglify":"^2.0.0","uglify-js":"^3.3.9"}}写一个gulp脚本新建一个gulpfile.js文件，导入需要的模块。这里我把路径统一写在InPATHS中。具体路径怎么写，可以去gulp官网的api：https://www.gulpjs.com.cn/doc...gulp-minify-css的官网提示已被弃用，改用gulp-clean-css，这里保留只是为了告诉大家，效果是一样的，用户是一致的。为了保证项目不出问题，还是用最新的比较好。'usestrict';vargulp=require('gulp'),minifycss=require('gulp-minify-css'),//压缩的cssdeprecatedcleancss=require('gulp-clean-css'),//压缩cssimagemin=require('gulp-imagemin'),//压缩图片autoprefixer=require('gulp-autoprefixer'),//处理浏览器前缀uglify=require('gulp-uglify'),//压缩jssourcemaps=require('gulp-sourcemaps'),//生成sourcemapgulpif=require('gulp-if'),//条件判断notify=require('gulp-notify'),//处理错误cache=require('gulp-cache'),//只压缩修改后的图片htmlclean=require('gulp-htmlclean'),//精简htmlhtmlmin=require('gulp-htmlmin'),//压缩htmlrev=require('gulp-rev-append'),//增加版本号sequence=require('gulp-sequence'),//同步执行任务PATHS={ROOT:'./',DEST:'./dist/',HTML:'**/*.{html,htm}',CSS:'**/*.css',IMG:'**/*.{png,jpg,gif,ico}',JS:'**/*.js'}压缩处理css这里需要排除node_modules文件夹和生成构建目录/dist/及其子目录，直接！按照要排除的目录。gulp.task('minify-css',function(){returngulp.src([PATHS.CSS,'!./dist/**','!./node_modules/**']).pipe(sourcemaps.init()).pipe(autoprefixer({browsers:['last10versions','Firefox>=20','Opera>=36','ie>=9','Android>=4.0',],cascade:true,//是否美化格式remove:false//是否去掉不需要的前缀})).pipe(cleancss({keepSpecialComments:'*'//保留所有特殊前缀})).pipe(sourcemaps.write('.')).pipe(gulp.dest(PATHS.DEST)).pipe(notify({message:'cssminifycomplete'}));});一些引用的css或者js不需要压缩，比如jQuery'，Bootstrap，或者公司内部的publiclibrary.min.{css,js}等，这里使用gulp-if排除min.cssvarconditionCss=function(f){如果(f.path.endsWith('.min.css')){返回假；}返回真；}；修改处理css.pipe(gulpif(conditionCss,cleancss({keepSpecialComments:'*'//keepallspecialprefixes})))的操作，压缩js，排除min.js，同样的方法，这里也记得记得包含不处理gulp脚本排除项。gulp.task('minify-js',function(){returngulp.src([PATHS.JS,'!./dist/**','!./node_modules/**','!gulpfile.js']).pipe(sourcemaps.init()).pipe(gulpif(conditionJs,uglify())).pipe(sourcemaps.write('.')).pipe(gulp.dest(PATHS.DEST)).pipe(notify({message:'jsminifycomplete'}));});压缩处理imggulp.task('minify-img',function(){returngulp.src([PATHS.IMG,'!./dist/**','!./node_modules/**']).pipe(缓存(imagemin())).pipe(gulp.dest(PATHS.DEST));});压缩处理HTMLgulp.task('minify-html',function(){returngulp.src(PATHS.DEST+PATHS.HTML).pipe(htmlclean()).pipe(htmlmin({removeComments:true,//清除HTMLcollapseWhitespace:true,//压缩HTMLminifyJS:true,//压缩页面JSminifyCSS:true,//压缩页面CSSminifyURLs:true})).pipe(gulp.dest(PATHS.DEST));});Increase版本号gulp.task('rev',function(){returngulp.src([PATHS.HTML,'!./dist/**','!./node_modules/**']).pipe(rev()).pipe(gulp.dest(PATHS.DEST));});任务的同步执行因为gulp的所有任务都是异步完成的，所以有时候我们需要同步执行任务，例如：先编译less，在压缩编译好的css时，此时gulp.task('deploy',sequence(['minify-css','minify-js'],'minify-img','rev','minify-html'));执行gulp的所有任务在这里创建一个名为default的任务，执行上面的deploy任务gulp.task('default',['deploy'],function(e){console.log([完成]请继续操作");})部署在终端输入gulp或者gulpdefault执行构建，在我们设置的输出目录下可以看到我们压缩后的代码。至此，一个简单的gulp脚本写的差不多了，麻雀虽小，五脏俱全。如果您有什么好的建议，欢迎交流。
