什么是gulp,怎么使用gulp
2017-12-28 21:06
357 查看
<———
在这之前,你肯定会注意到上面箭头所指的位置,那么你一定会看见,文章外面的大拇指图标,动动你的手指,就能点一下它,表示你很喜欢这篇文章。
正题:
什么是gulp:
Gulp 是基于node.js的一个前端自动化构建工具,开发这可以使用它构建自动化工作流程(前端集成开发环境)。
使用gulp你可以简化工作量,让你把重点放在功能的开发上,从而提高你的开发效率和工作质量。
例如:你可以用gulp可以网页自动刷新,和MVVM开发模式很相似,如果你对vue.js有所了解的话,那么你一定不会陌生。你也可以使用gulp对sass进行预处理、代码检测、图片优化压缩、只需要一个简单的指令就能全部完成。
由于gulp是基于node.js开发的,所以你在使用gulp之前,必须要先安装node。然后你可以打开node服务器并执行
之后你需要创建一个工程目录,通过dos命令,进入刚创建好的工程目录,
然后执行
然后执行
在工程目录下手动创建gulpfile.js文件。
然后你可以在gulpfile.js里最先引入gulp模块。
之后我们去dos命令里执行
你会看到‘gulp启动成功’。这就表明,你可以正常使用gulp了。
之后就是引入各个需要的压缩的模块。
加载htmlmin模块:
如果你是使用sass预编译的css,那么gulp可以帮你预处理sass:
图片处理也是一样:
加载js丑化模块
然后你只需要监听你编写的那些文件们,就可以实时的改变压缩到dist文件里的文件代码了。
最后你就可以在dos命令里执行
当然你也可以注册一个只执行
以上内容纯手打,如有纰漏,欢迎私信,
如果你有什么好的方法或者代码,欢迎私信
让我们一起共同进步!
在这之前,你肯定会注意到上面箭头所指的位置,那么你一定会看见,文章外面的大拇指图标,动动你的手指,就能点一下它,表示你很喜欢这篇文章。
正题:
什么是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") })
以上内容纯手打,如有纰漏,欢迎私信,
如果你有什么好的方法或者代码,欢迎私信
让我们一起共同进步!
相关文章推荐
- 怎么查看某个网站使用什么web服务器及架构
- 请高手指点,PHP问题,解密出一个文件,不知道这个是什么用的,怎么使用,谢谢好友指点
- Mysql中的事物是什么?怎么使用?
- 什么是React-redux、为什么使用React-redux、怎么使用React-redux
- 数位板怎么用?刚开始使用数位板要从什么开始练习
- 我怎么忽略了身份框架魔法,只是使用OWIN验证的中间件,以获得要求我寻求什么呢?
- Scheme是什么、怎么自定义Scheme、JLRoutes的使用-备
- 什么是WiFi打印机?WiFi打印机怎么连接和使用
- session有什么用?怎么使用?
- JS基础学习第八天:JSON是什么?怎么使用?
- Canonical标签怎么使用,Canonical标签有什么作用?
- bower 是什么,怎么使用
- 博客园的邮件发送如何做的?使用普通邮件比如QQ邮件等,它对发送的邮件的数量有限制。博客园怎么做的呢?用的什么工具?
- Oracle使用默认用户登陆时,conn sys/密码 as sysdba,密码怎么是什么都行啊?
- static_cast和reinterpret_cast这两个操作符有什么区别,应该怎么使用这两个操作符
- new一个类对象和使用类名创建一个对象有什么区别?该怎么解决
- vue2.0中vuex到底是干什么的?怎么使用?
- cmd是什么意思 cmd.exe怎么使用
- 理解浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
- 1. 请问PHP里的ECHO是什么意思 ?请问PHP里的ECHO是什么意思???有什么作用???又应该怎么使用???