前言刚开始接触前端的时候，我们并不知道前端有工具可以帮助我们自动打包压缩文件。问题是随着项目功能越来越复杂，项目越来越大，页面的执行速度开始变慢，所以我们意识到前端优化的重要性，但是之前的压缩打包需要我们手动执行或者直接去转换后的网站进行转换，无疑会增加我们的工作量。作为程序员，我觉得让程序执行我们想执行的更重要，于是google了一下，找到了grunt和gulp。都是自动化打包，但是grunt一大堆复杂的配置参数让我很头疼，直到打开gulp的官网，仿佛打开了新世界的大门，没有那么多复杂的配置参数，它的API也是非常简单，易学，gulp使用nodejs中的stream来读取和操作数据，速度更快。于是就有了下面的做法。 这里，假设你已经了解了gulp的介绍，安装了node.js。不懂的请自行百度。创建项目目录testGulp/├──app/│├──static/││├──images/│││└─index.jpg││├──less/│││└─index.less││└──scripts/││└─index.js│└─views/│└─index.html│├─dist/└─release/Initializenpm当我们新建目录结构时，没有package.json文件在里面是的，我们需要npminit，然后继续回车，会生成一个package.json文件。熟悉node的同学一定了解package.json文件的作用，里面包含了我们项目需要的各种模块。依赖关系和基本信息。下面是我的package.json:{"name":"testGulp","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"author":"Kevin","license":"ISC","dependencies":{},"devDependencies":{"gulp":"^3.9.1","gulp-autoprefixer":"^4.0.0","gulp-clean":"^0.3.2","gulp-concat-dir":"^1.0.0","gulp-imagemin":"^4.0.0","gulp-less":"^3.3.2","gulp-minify-css":"^1.2.4","gulp-minify-html":"^1.0.6","gulp-plumber":"^1.1.0","gulp-run-sequence":"^0.3.2","gulp-uglify":"^3.0.0","gulp-zip":"^4.0.0"}}安装gulp任务需要的模块打开终端，输入npminstallpackage（安装的包名，如：gulp）--save-dev回车，会发现一个进度条在终端中正在安装加载，安装成功。打开package.json可以发现devDependencies中会出现我们刚刚安装的包名和对应的版本号。 这里，可能有同学会问这两者有什么区别： 使用--save-dev（也可以简写为-D）输出会出现在devDependencies中，devDependencies代表开发调试时的依赖关系，并不会在项目实际发布时实际出现在项目中。 使用--save（也可以简写为-S）输出会出现在dependencies中，代表release后的依赖，在项目真正发布的时候才会真正出现在项目中。没有他们，项目将无法运行。构建Gulp任务Gulp用于协调和指导其他模块的工作。首先在myproject文件夹下新建一个gulpfile.js文件，gulp会运行这个文件中的js。我的文件最终内容如下：//Usestrictmode。保证js的严谨性，养成良好的习惯。'usestrict';//使用require引入所有需要的模块，Gulp.js是基于Node.js构建的//因为Node.js遵循CommonJS规范//CommondJS有一个Modules规范，允许它在同步modeLoadmodulevargulp=require('gulp'),//compressjsuglify=require('gulp-uglify'),//compileLessless=require('gulp-less'),//压缩cssminifyCss=require('gulp-minify-css'),//自动前缀补全autoprefixer=require('gulp-autoprefixer'),//压缩HTMLminifyHtml=require('gulp-minify-html'),//压缩图片imagemin=require('gulp-imagemin'),//管理合并，可以将所有文件合并到同一个目录下，好处是可以减少网络请求concat=require('gulp-concat-dir'),//错误处理提示plug-inplumber=require('gulp-plumber'),//压缩文件zip=require('gulp-zip'),//控制task中的串行和并行。（Gulp默认是并行的）//串行是指多个任务，每个任务按顺序执行，一个完成后才能执行下一个。//并行是指多个任务可以同时执行。runSequence=require('gulp-run-sequence'),//用于删除文件clean=require('gulp-clean');//创建一个名为js的任务gulp.task('js',function(){//首先获取app/static/scripts下的所有.js文件（**/表示包含所有子文件夹）returngulp.src('app/static/scripts/**/*.js')//错误管理模块（当有错误，会自动向终端输出提示).pipe(plumber())//合并同一目录下的所有文件，合并后的目录名作为合并后的文件名.pipe(concat({ext:'.js'}))//jscompression.pipe(uglify())//将合并压缩后的文件输出到dist/static/scripts（如果没有dist目录，会自动生成dist目录）.pipe(gulp.dest('dist/static/scripts'))});//创建一个名为less的任务gulp.task('less',function(){//首先获取app/static/less中的所有文件.less(**/表示包含所有子文件夹)returngulp.src('app/static/less/**/*.less')//错误管理模块（当出现错误时，会自动输出提示到theterminal).pipe(plumber())//将less文件编译成css文件.pipe(less())//前缀自动补全插件.pipe(autoprefixer())//合并同目录下的所有文件，合并后的目录名作为合并后的文件名.pipe(concat({ext:'.css'}))//csscompression.pipe(minifyCss())//合并并压缩文件输出到dist/static/css（如果没有dist目录，会自动生成dist目录）.pipe(gulp.dest('dist/static/css'))});//创建一个Atasknamedhtmlgulp.task('html',function(){//先获取app/views下的所有.html文件（**/表示包含所有子文件夹）returngulp.src('app/views/**/*.html')//错误管理模块（当出现错误时，会自动向终端输出提示）.pipe(plumber())//htmlcompression.pipe(minifyHtml())//输出压缩文件到dist/views（如果没有dist目录，dist目录会自动生成）.pipe(gulp.dest('dist/views'))});//创建一个名为images的任务gulp.task('images',function(){//首先获取app/static/images下所有带.{png,jpg,jpeg,ico,gif,svg}后缀的图片文件（**/表示包含所有子文件夹）returngulp.src('app/static/images/**/*.{png,jpg,jpeg,ico,gif,svg}')//错误管理模块（出现错误时会自动输出提示toterminal).pipe(plumber()).pipe(imagemin({optimizationLevel:5,//Type:NumberDefault:3Valuerange:0-7(optimizationlevel)progressive:true,//Type:BooleanDefault:false无损压缩jpg图片interlaced:true,//Type:BooleanDefault:falseInterlacedscangifforrenderingmultipass:true//Type:BooleanDefault:falseOptimizesvgmultipletimesuntilfullyoptimized}))//压缩图片输出到dist/static/images(如果没有dist目录，会自动生成dist目录).pipe(gulp.dest('dist/static/images'))});//创建一个名为cleangulp.task的任务('clean',function(){//首先获取dist/*下的所有文件returngulp.src('dist/*',{read:false})//删除dist/*.pipe(clean())})//创建名为publictask的文件gulp.task('public',function(){//先获取dist/*下的所有文件returngulp.src('dist/*')//错误管理模块（有错误时会自动输出aprompttotheterminal).pipe(plumber())//将dist/*下的所有文件压缩打包生成一个public.zip文件.pipe(zip('public.zip'))//生成的public.zip文件输出到release（如果没有release目录，会自动生成release目录）.pipe(gulp.dest('release'))})//创建一个名为watch的任务gulp.task('watch',function(){//监听每个目录下的文件，有变化则执行对应的任务操作文件gulp.watch('app/static/scripts/**/*.js',['js']);gulp.watch('app/static/less/**/*.less',['less']);gulp.watch('app/views/**/*.html',['html']);})//创建一个名为redist的任务gulp.task('redist',function(){//先运行clean，然后并行运行html,js,less,images,watch//如果你不这样做使用gulp-run-sequence插件，因为Gulp是并行执行的//可能会出现一种情况（其他处理快的文件都处理完了，最后再执行clean，之前处理的文件会被删除,所以用了runSequence)runSequence('clean',['html','less','js','images','watch'])})//创建一个名为default的任务（以上任务可以不存在，但是这个任务必须有，否则在终端执行gulp命令会报错)//在终端输入gulp命令，默认会执行default任务，会执行redist任务gulp.task('default',['redist']);最后，打开终端进入所在目录，输入gulp开始看到我们已经压缩打包了文件，希望对一些配置gulp有困难的朋友有所帮助
