gulp

r囧r小猫 2023-08-17 15:17 154阅读 0赞

gulp是基于node的自动化构建工具

gulp能干啥？1.压缩JS、css文件2.合并文件3.自动编译SASS4.自动压缩图片5.保存时自动刷新浏览器

npm init ---->初始化一个gulp环境，创建一个package.json文件  
　　--save:将信息保存在package.json中  
　　--dev:将信息保存在package.json的devDependencies节点中

用gulp当然要给它位置啦！gulpfile.js是gulp项目的配置文件，是位于根目录的普通JS文件  
一般是gulpfile pakage node\_modules三个文件放在一起。

添加部署文件：

1、输入源  
　　输入源(操作的文件路径) gulp.src(文件路径)  
  
　　src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件  
  
　　文件路径设置：  
　　a、单个文件夹:"src/js/index.js";  
  
　　b、匹配所有文件:"\*" 例：src/\*.js --->src下面所有的js文件  
  
　　c、匹配0个或多个子文件夹："\*\*" 例如：scr/\*\*/\*.js--->src下面的0个或者多个子文件夹的js文件  
  
　　d、匹配多个属性：\{\} 例如：src/\{a,b\}.js--->src下面的a.js和b.js src/\*.\{jpg,png,gif\}--->src下面所有的jpg png gif文件  
  
　　e、排除文件：！ 例如: !scr.a.js--->排除src下面的a.js文件  
  
  
  
　　2、通过管道进行输入  
　　 管道：pipe()  
  
  
　　3、输出源：参数是将文件输出到哪  
　　 dest()

栗子：  
　　拷贝：gulp.src("src/\*\*/\*").pipe(gulp.dest("dist/js"))

合并：gulp.task("addDate",function()\{  
　　　　　　gulp.src(\["src/json/\*\*/\*","src/xml/\*\*/\*"\])  
　　　　　　.pipe(gulp.dest("dist/data"))  
　　　　\})

gulp高级：--->当然需要加载插件！！！！！

1.图片压缩---安装插件cnpm install gulp-imagemin --save-dev  
　　var imgmin = require("gulp-imagemin");--->引入图片压缩的模块  
　　　　gulp.task("imgmin",function()\{  
　　　　//将所有的图片进行压缩  
　　　　gulp.src("src/imgs/\*\*/\*")  
　　　　//通过管道先压缩，然后再通过管道输出到dist文件夹下  
　　　　.pipe(imgmin())  
　　　　.pipe(gulp.dest("dist/imgs"))  
　　\})

2.Js压缩---命令行安装 cnpm install gulp-uglify --save-dev  
　　var jsMin = require("gulp-uglify");--->引入Js压缩的模块  
　　gulp.task("Jsmin",function()\{  
　　//将所有的JS进行压缩  
　　gulp.src("src/js/js\*.js")  
　　//通过管道先压缩，然后再通过管道输出到dist文件夹下  
　　.pipe(jsMin())  
　　.pipe(gulp.dest("dist/js/js"))  
　　\})

3.编译sass及压缩css ---->cnpm install gulp-sass-china --save-dev  
　　var css = require("gulp-sass-china")//引入sass编译的模块  
　　//开启任务  
　　gulp.task("cssmin",function()\{  
　　//将scss下面的所有scss sass文件 进行编译  
　　gulp.src("scss/\*\*/\*.\{scss,sass\}")  
　　//通过管道进行编译，然后再通过管道输出待src/css文件夹下，  
　　//如果要进行压缩的话就在css里面传递参数 compressed为紧凑格式  
　　.pipe(css(\{  
　　outputStyle:"compressed"  
　　\}))  
　　.pipe(gulp.dest("src/css"))  
　　\})

4.监听  
　　虽然以上可以将sass编译和压缩 但是如果在sass里面编写文件 css里面的文件不会改变的！而需要每次都去终端中运行。特别麻烦。首先监听不能够单独存在 必须配合任务一起使用！  
　　/\*  
　　监听：gulp.watch()  
　　参数两个：1.监听哪些文件发生变化2.当文件发生变化的时候去执行哪个任务---》（为一个集合）  
　　\*/  
　　gulp.task("scss",function()\{  
　　gulp.task("scss/\*\*/\*.\{scss,sass\}",\["cssmin"\])  
　　\})

5.服务器--->cnpm install gulp-connect --save-dev  
　　参数：  
　　root:设置目录  
　　port:端口号  
　　livereload:当设置为true的时候，gulp会自动检测文件的变化然后自动进行源码构建  
　　/\*搭建本地服务器\*/  
　　var connect = require("gulp-connect");  
　　gulp.task("server",function()\{  
　　　　connect.sercer(\{  
　　　　　　root:"src",//路径  
　　　　　　port:123,//端口号  
　　　　　　livereload:true，//检测文件变化  
　　　　\})  
　　\})  
6.自动刷新  
　　/\*搭建本地服务器\*/  
　　var connect = require("gulp-connect");  
　　　　gulp.task("server",function()\{  
　　　　connect.server(\{  
　　　　　　root:"src",  
　　　　　　port:123,  
　　　　livereload:true,

\})  
　　\})  
　　/\*实现自动刷新\*/  
　　//server+watch 注意服务跟监听只能存在一个  
　　//因此我们需要把刷新和服务器开启为2部分  
　　gulp.task("server-watch",funcion（）\{  
　　　　gulp.watch("src/index.html",function()\{  
　　　　gulp.src("src/index.html").pipe(connect.reload())  
　　\})  
　　gulp.task("server-task",\["server","server-watch"\])

7.转义ES6 gulp-babel--->cnpm install --save-dev gulp-babel @babel/core @babel/preset-env  
　　const gulp = require('gulp');  
　　const babel = require('gulp-babel');

gulp.task('babel', () =>  
　　　　 gulp.src('src/es6.js')  
　　 　　.pipe(babel(\{  
　　　　　　 presets: \['@babel/env'\]  
　　　　 \}))  
　　 　　.pipe(gulp.dest('dist'))  
　　　　);  
　　\})

本文主要是借鉴华哥的，之所以码出来是便于系统的体验一把，还更好记！！

[https://www.cnblogs.com/nanianqiming/p/8028536.html][https_www.cnblogs.com_nanianqiming_p_8028536.html]

转载于:https://www.cnblogs.com/yangc6925/p/11225098.html

[https_www.cnblogs.com_nanianqiming_p_8028536.html]: https://www.cnblogs.com/nanianqiming/p/8028536.html