什么叫Gulp？怎样应用Gulp
Gulp 是根据node.js的一个前端开发全自动化搭建专用工具，开发设计这可使用它搭建全自动化工厂作步骤（前端开发集成化开发设计自然环境）。
应用gulp你可以以简单化工作中量，给你把关键放到作用的开发设计上，进而提升你的开发设计高效率和工作中品质。
比如：你可以以用gulp能够网页页面全自动更新，和MVVM开发设计方式很类似，假如你对vue.js有一定的掌握得话，那麼你一定不容易生疏。你还可以应用gulp对sass开展预解决、编码检验、照片提升缩小、只必须一个简易的命令就可以所有进行。
因为gulp是根据node.js开发设计的，因此你一直在应用gulp以前，务必要先安裝node。随后你可以以开启node网络服务器并实行 npm install gulp -g 全局性安裝gulp.
以后你必须建立一个工程项目文件目录，根据dos指令，进到刚建立好的工程项目文件目录，
随后实行npm init 建立package.json文档. 这一文档储存着你文件目录下的新项目控制模块的有关信息内容。能够把它想像成你常用到控制模块儿的一个文件目录.
随后实行npm intall gulp --save-dev 当地安裝gulp
在工程项目文件目录着手动建立gulpfile.js文档。
随后你可以以在gulpfile.js里最开始引进gulp控制模块。
var gulp = require( gulp
gulp.task( default ,function(){
console.log( gulp起动取得成功 //检测gulp是不是起动
})
以后大家去dos指令里实行 gulp
你能见到‘gulp起动取得成功’。这就说明，你可以以一切正常应用gulp了。
以后便是引进每个必须的缩小的控制模块。
载入htmlmin控制模块：
var htmlmin = require( gulp-htmlmin
gulp.task( html ,function(){
& )
.pipr(htmlmin({
collapseWhitespace : true,
removeComments : true
}))
//最终将你创建的html文档缩小到全自动建立的dist文档里;
.pipe(gulp.dest( dist ))
})
假如你是应用sass预编译程序的css,那麼gulp能够帮你预解决sass:
var scss = require( gulp-sass
var cssnano = require( gulp-cssnano
//由于我用的是scss,因此这儿申请注册每日任务写出了scss;
gulp.task( scss ,function(){
gulp.src( *.scss )
.pipe(scss())
.pipe(gulp.dest( dist ))
.pipe(cssnano())
.pipe(gulp.dest( dist/css ))
});
照片解决也是一样：
var imagemin = require( gulp-imagemin
var cache = require( gulp-cache
gulp.task( image ,function(){
gulp.src( img/*.{jpg,pnp,gif} )//要解决的照片文件目录为img文件目录下的全部的.jpg .png .gif 文件格式的照片;
.pipe(cache(imagemin({
progressive : true,//是不是渐近的提升
svgoPlugins : [{removeViewBox:false}],//svgo软件是不是删掉幻灯片图片片
interlaced : true //是不是各行扫描仪
})))
.pipe(gulp.dest( dist/img ))
});
载入js控制模块
var uglify = require( gulp-uglify
gulp.task( js ,function(){
gulp.src( js/*.js )
.pipe(uglify())
.pipe(gulp.dist( dist/js ))
});
随后你只必须监视你撰写的这些文档们，便可以即时的更改缩小到dist文档里的文档编码了。
gulp.task( watch ,[ scss , js , html , image ],function(){
gulp.watch( *.scss ,[ scss
gulp.watch( js/*.js ,[ js
gulp.watch( img/*.* ,[ image
& ,[ html
})
最终你也就能够在dos指令里实行gulp watch 按住回车键，便可以刚开始你的工程项目了.
自然你还可以申请注册一个只实行gulp 的默认设置每日任务 也并不是甚么难题：
gulp.task( default ,[ watch , html , scss , image , js ],function(){
gulp.start( watch , html , scss , image , js )
})
---------------------
创作者：a_Keri
全文：a_Keri/article/details/