gulp的安装使用与实例

gulp安装与使用

简介

gulp是一个基于Node.js的前端自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。

guip官网

guip 中文官网

安装

安装前先在控制台输入

node -v

确认已经安装Node.js

Node.js版本可能会和guip版本不兼容，此时最好的办法就是用nvm

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提供的接口

注册任务

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插件

我们要处理文件的合并、压缩等操作，接口中没有提供，都放在了插件中。

插件下载：

	功能	下载
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

guip实例

整理html文件

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());
})

sass转css并压缩

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());
})

合并js并压缩

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