全国服务热线:4008-888-888

技术知识

什么叫Gulp?怎样应用Gulp

什么叫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/ 




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服