• 微信
您当前的位置:首页  > 文章 >  什么是Gulp?如何使用Gulp

什么是Gulp?如何使用Gulp

作者:admin 时间:2020-01-16 阅读数:52人

什么是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(){     gulp.src('*.html')     .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']);     gulp.watch('*.html',['html']); })

 

最后你就可以在dos命令里执行gulp watch 按下回车,就可以开始你的工程了.


当然你也可以注册一个只执行gulp 的默认任务 也并非什么难事:


gulp.task("default",["watch","html","scss","image","js"],function(){     gulp.start("watch","html","scss","image","js") })

 

--------------------- 

作者:a_Keri 

原文:https://blog.csdn.net/a_Keri/article/details/82252236 


声明

源码下载不顺利,比如源码在百度网盘的有时会被无故取消等,请联系QQ:46667551
本站大部分下载资源收集于网络,但除特别说明之外,基本全部亲自测试可用!
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

原文链接:https://www.dnwfb.com//1062.html,转载请注明出处