首页 > 其他 > 详细

Gulp概述--简介--功能--安装--操作

时间:2020-03-21 03:47:35      阅读:34      评论:0      收藏:0      [点我收藏+]

什么是gulp?

1.用自动化构建工具增强你的工作流程!
2.gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间、创造更大价值。
3.基于node强大的流(stream)能力,gulp在构建过程中并不把文件立即写入磁盘,从而提高了构建速度。
 
gulp有哪些功能?
1.文件复制
2.html压缩、css编译压缩、js合并压缩
3.优化图片-压缩图片
4.编译sass
5.es6转换es5
......
如何安装Gulp?
1.安装Node--利用Node下面npm进行模块安装
2.全局安装gulp:  npm i gulp -g   (只装一次,任意目录安装,作用于整个环境)
3.作为项目的依赖安装,一定要安装到你项目的根目录下面  npm i gulp -D  (项目目录下面,每个项目下面都需要)
确定此项目你用了哪些包,不要忘记项目初始化
npm init
 
如何操作Gulp?
首先,利用任何文本编辑器在项目大的根目录下创建一个名为 gulpfile.js 的文件
基本语法
const gulp  =  require(‘gulp‘);         引入gulp模块,生成gulp对象
gulp.task(taskname,callback)        创建任务    taskname指任务名称  callback指执行的回调函数
gulp.src()                                       设置引入文件的路径
gulp.dest()                                     输出文件设置(如果不存在目录名,自动生成)
pipe()                                             管道流(将任务链式连接起来)
 
终端输入 gulp 任务名   执行任务
 
Gulp的几种功能应用
1. 文件复制
技术分享图片

 

 2. html文件压缩

首先,项目路径下安装 npm i gulp-minify-html -D

技术分享图片

技术分享图片

 

3. 压缩css

首先,项目路径下安装 npm i gulp-minify-css -D

技术分享图片

技术分享图片

 

 注:现在gulp-clean-css可能取代了上面的插件

 

4.压缩js文件,es6转es5

npm i gulp-uglify -g   安装插件

npm i gulp-babel@7   
npm i babel-core      
npm i babel-preset-es2015
技术分享图片
技术分享图片

 

 

5. 编译sass

npm i gulp-sass
npm i gulp-sourcemaps
npm i gulp-load-plugins

技术分享图片

 

 6. 图片压缩

npm i gulp-imagemin@6 -D 

技术分享图片

 

 

7. 监听

npm i gulp-watch -D

技术分享图片

 

 

Gulp概述--简介--功能--安装--操作

原文:https://www.cnblogs.com/yznotes/p/12528179.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!