简单的介绍下gulp:
gulp是基于流/node的自动化构建工具；它采用的是管道传输机制（即一个输入源，一个管道，一个输出源）
输入源即开发阶段的文件：gulp.src('path')
通过管道进行传输：.pipe()
输出源即压缩过后文件所放置的位置：gulp.dist('path')
首先得全局安装gulp：$ cnpm install --global gulp
注：全局安装需要在c盘下进行安装（ **window+r **）打开命令窗
cnpm和npm是等价的，顺便用哪个；且install可以简化成** i**
全局安装之后的所有命令都是在你所在文件夹进行，别在c盘目录下进行安装；
然后再初始化文件夹：cnpm init
初始化文件夹会出现一个package.json文件，之后安装的一系列插件都在里面可以看到；
第三步则是局部安装：cnpm install gulp --save-dev
在这里，--save是将保存配置信息至package.json，-dev是保存至package.json的devDependencies对象中
安装之后会出现一个node_modules文件夹
--save-dev可以简化成-D
第四步则是创建一个 gulpfile.js 文件
gulpfile.js文件的位置最好是与node_modules，package.json放在同一层级，如图：
image
准备工作已经ko了，正式开始压缩项目吧！
我们先检测下gulp是否可以正常启动
在gulpfile.js中配置，如下：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">//引入gulp
var gulp = require("gulp");
//开启一个任务
gulp.task('default', function(){ //检测gulp是否启动
console.log("gulp启动了");
})</pre>
复制代码
](javascript:void(0); "复制代码")
直接在小黑窗口执行gulp就可以看到了哟！！！
压缩html文件
安装压缩html文件的依赖：cnpm i gulp-htmlmin -D
再在gulpfile.js中配置，如下：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">//引入压缩html所需的模块
var gulpHtmlMin = require('gulp-htmlmin');
gulp.task('htmlmin', function(){ //可以单个压缩
gulp.src('src/zhanku.html') //多个压缩
gulp.src(['src/zhanku.html', 'src/enter.html']) //也可以压缩整个html文件夹
gulp.src('src/html/*/.html')
.pipe(gulpHtmlMin({ //删除空格
collapseWhitespace : true, //删除注释
removeComments : true }))
.pipe(gulp.dest('dist'))
})</pre>
[
复制代码
](javascript:void(0); "复制代码")
注：配置完成之后执行的话直接在黑窗口执行 gulp 加上task后面所跟的那个名字（不固定，顺便设置）
如果是sass文件，则直接编译sass并压缩css
安装依赖：cnpm i gulp-sass-china -D
再在gulpfile.js中配置，如下：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">var gulpSassmin = require('gulp-sass-china');
gulp.task('sassmin', function(){ //编译src下面的scss/sass文件夹里的所有文件
gulp.src('src/scss/*/.{scss, sass}') //outerStyle是压缩类型，默认是nested(嵌套缩进)、enpanded(无缩进)
//comoact(简介格式)、compressed(压缩)
.pipe(gulpSassmin({
outerStyle: "compressed" }))
.pipe(gulp.dest('dist/css'))
})</pre>
[
复制代码
](javascript:void(0); "复制代码")
直接压缩css文件
安装css所需依赖：cnpm i gulp-clean-css -D
注：下面不管是img,js包括css引入输入源写法和html尽数相同，接直接写最后一种了
再在gulpfile.js中配置，如下：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">var gulpCssMin = require('gulp-clean-css')
gulp.task('cssmin', function(){
gulp.src("src/css/**/*.css")
.pipe(gulpCssMin())
.pipe(gulp.dest('dist/css'))
})</pre>
[
复制代码
](javascript:void(0); "复制代码")
压缩img图片
安装css所需依赖：cnpm i gulp-imagemin -D
再在gulpfile.js中配置，如下：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">var gulpImgsmin = require('gulp-imagemin');
gulp.task('imgmin', function(){
gulp.src('src/img/**/*')
.pipe(gulpImgsmin())
.pipe(gulp.dest("dist/imgs"))
})</pre>
[
复制代码
](javascript:void(0); "复制代码")
压缩js文件
安装js所需依赖：cnpm i gulp-uglify -D
再在gulpfile.js中配置，如下：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">var gulpJsmin = require('gulp-uglify');
gulp.task('jsmin', function(){ //注意，js中可能有多个文件夹，比如说一些插件一些类库之类的,
//所以看你需求而定路径写对就行
gulp.src('src/js/*/.js')
.pipe(gulpJsmin())
.pipe(gulp.dest('dist/js'))
})</pre>
[
复制代码
](javascript:void(0); "复制代码")
注意：js编译有可能会报错，会报错的原因是你所编写的js中可能有es6的语法即ex6以上的语法（就比如说es6的字符串模板，肯定是我们最喜欢用的神器了），如果有的话需要将es6编译成es5；
转义es6
安装所需依赖：cnpm i gulp-babel babel-core babel-preset-env -D
再在gulpfile.js中配置，如下：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background-color, border-color, border-radius, padding, margin, color, opacity; overflow: auto; font-family: "Courier New"; font-size: 12px; overflow-wrap: break-word;">var gulpBalel = require('gulp-babel');
gulp.task('default', function(){ //有多个文件存在ex6写法的话也是也可以同时编译多个
gulp.src('src/index.js')
.pipe(gulpBalel({
presets: ['env']
}))
.pipe(gulp.dest('dist/js'))
})</pre>
[
复制代码
](javascript:void(0); "复制代码")
网友评论