gulp是一个基于Node.js的前端自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。
安装前先在控制台输入
node -v
确认已经安装Node.js
Node.js版本可能会和guip版本不兼容，此时最好的办法就是用nvm
全局安装：
目前gulp的最新版本是4.1.0，3.9.1是目前比较稳定的版本
npm i gulp@3.9.1 -g
gulp -v # 测试是否安装成功
局部安装：
cnpm install gulp@3.9.1 --save-dev
–save 将这个文件，安装到本地的当前文件夹
-dev 将安装gulp的信息保存在package.json里面
我要评论gulp.task(name[,deps],fn)
参数：
name是任务名称，执行任务时，使用这个名称
fn是一个回掉函数，代表这个任务要做的事情
例：
gulp.task("print",function(){
console.log("123456");
})
globs
类型：字符串或者数组
将本地文件读取到gulp内存中
gulp.src(globs[, options])
参数：
src方法主要是用来读取目标源文件，所以参数就是一个目标源文件的路径
globs 数据类型：string/array
查找文件的规则如下：
1.指定具体文件
src/a.js
2.匹配所有文件
src/*.js(包含src下的所有js文件)；
3.匹配0个或多个子文件夹
src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
4.匹配多个属性
src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
5.排除文件
!src/a.js(不包含src下的a.js文件)；
将内存中数据输出到本地文件中
gulp.dest(path[,options])
参数：
dest方法主要用来将数据输出到文件中，所以参数就是目标文件路径
如果设置的这个目的文件路径不存在，则会自动创建
用来监视某个或某些文件发生变化，可以在变化的时候，执行一个回掉函数，以保证文件中的代码和效果一致
gulp.watch()
在命令行使用gulp命令，后面跟任务名称：
gulp 任务名称
单词执行多个任务时，效率会很低，所以gulp提供了一个默认任务，可以将要执行的所有任务放在一个数组中，这样只需要执行这个默认任务就能执行数组中的所有任务
gulp.task("print1", function() {
console.log("123456");
})
gulp.task("print3", function() {
console.log("123456");
})
gulp.task("default", ["print1", "print3"]);
我们要处理文件的合并、压缩等操作，接口中没有提供，都放在了插件中。
插件下载：
| 功能 | 下载 | |
|---|---|---|
| gulp-concat | 合并文件(js/css) | cnpm install gulp-concat --save-dev |
| gulp-uglify | 压缩js文件 | cnpm install gulp-uglify --save-dev |
| gulp-rename | 文件重命名 | cnpm install gulp-rename --save-dev |
| gulp-less | 编译less | cnpm install gulp-less --save-dev |
| gulp-sass | 编译sass | cnpm install gulp-sass --save-dev |
| gulp-clean-css | 压缩css | cnpm install gulp-clean-css --save-dev |
| gulp-livereload | 实时自动编译刷新 | cnpm install gulp-livereload --save-dev |
| gulp-htmlmin | 压缩html文件 | cnpm install gulp-htmlmin --save-dev |
| gulp-connect | 热加载，配置一个服务器 | cnpm install gulp-connect --save-dev |
| gulp-load-plugins | 打包插件（里面包含了其他所有插件） | cnpm install gulp-load-plugins --save-dev |
gulp.task("copy-html", function(){
return gulp.src("*.html")
.pipe(gulp.dest("dist/"))
.pipe(connect.reload());
})
gulp.task("images", function(){
//拷贝img下后缀为jpg的图片到指定路径
// return gulp.src("img/*.jpg").pipe(gulp.dest("dist/images"));
//拷贝img下后缀为jpg或png的图片到指定路径
// return gulp.src("img/*.{jpg,png}").pipe(gulp.dest("dist/images"));
//拷贝img下二级目录的所有文件拷贝到指定路径
// return gulp.src("img/*/*").pipe(gulp.dest("dist/images"));
//拷贝img下一级目录和二级目录的所有文件拷贝到指定路径
return gulp.src("img/**/*").pipe(gulp.dest("dist/images"))
.pipe(connect.reload());
})
gulp.task("data", function(){
return gulp.src(["json/*.json", "xml/*.xml", "!xml/04.xml"])
.pipe(gulp.dest("dist/data"))
.pipe(connect.reload());
})
const sass = require("gulp-sass");
//压缩css gulp-minify-css
const cleancss = require(" gulp-clean-css");
//重命名插件 gulp-rename
const rename = require("gulp-rename");
gulp.task("sass", function(){
return gulp.src("stylesheet/index.scss")
.pipe(sass())
.pipe(gulp.dest("dist/css"))
.pipe(cleancss ())
.pipe(rename("index.min.css"))
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload());
})
const concat = require("gulp-concat");
const uglify = require("gulp-uglify");
gulp.task("scripts", function(){
return gulp.src("javascript/*.js")
.pipe(concat("index.js"))
.pipe(gulp.dest("dist/js"))
.pipe(uglify())
.pipe(rename("index.min.js"))
.pipe(gulp.dest("dist/js"))
.pipe(connect.reload());
})
gulp.task("watch", function(){
/*
第一个参数，是文件监听的路径
第二个参数，我们要去执行的任务
*/
gulp.watch("*.html", ["copy-html"]);
gulp.watch("img/**/*", ["images"]);
gulp.watch(["json/*.json", "xml/*.xml", "!xml/04.xml"], ["data"]);
gulp.watch("stylesheet/index.scss", ['sass']);
gulp.watch("javascript/*.js", ['scripts']);
})
本文地址：https://blog.csdn.net/qq_41915936/article/details/107481492
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论