写在前面
:
因为gulp是一个基于node的工具,所以我们需要先安装node,具体可见【node的安装及配置】
一、gulp简介
gulp 是一个基于node的自动化打包构建工具,前端开发者可以使用它来处理常见任务:
- 搭建web服务器;
- 文件保存时自动重载浏览器;
- 使用预处理器如Sass、LESS;
- 优化资源,比如压缩CSS、JavaScript、压缩图片;
- 类似Gulp的工具,我们通常称之为构建工具或者叫自动化构建工具;
- 强调的是前端开发的流程,通过配置一系列的task,定义task处理的事物,然后定义执行顺序,来让Gulp执行task,从而构建前端项目的流程,说白了就是用来打包项目;
- 基于 node 强大的流(stream)能力,gulp 在构建过程中并不把文件立即写入磁盘,从而提高了构建速度;
- 不管做什么功能,都有一个统一的接口进行管理,必须去注册一个任务,然后去执行,这也是它的特点之一,即“任务化”。
二、gulp基本使用
1. 创建项目
① 创建项目目录,结构如下(注
:项目名称不可使用gulp):
例:
② 打开命令行工具:(注
:package.json文件为npm init –y自动创建,切勿手动创建)
- 使用
cd
命令进入项目目录,如:cd mygulp - 创建项目配置文件:
npm init -y
- 此时项目目录如下:
例:
2. gulp的安装
在命令行工具,依次执行:
① 全局安装:npm i gulp -g
② 局部安装:npm i gulp -D
③ 检测安装版本:gulp -v
注
: gulp -v 命令得到两个版本号,一个全局,一个局部,代表安装成功
此时项目结构如下:
例:
3. gulp配置文件
在项目中创建gulp配置文件 --> gulpfile.js
此时项目结构如下:
例:
4. 定义指令
在gulpfile.js文件中定义gulp指令,使用gulp实现功能。
const gulp = require("gulp"); // 引入gulp模块
function testFn(){ // 准备指令功能
console.log("test");
}
exports.test = testFn; // 定义指令(暴露模块)
三、gulp常用插件
以下插件使用格式为:npm(空格)i(空格)插件名(空格)-D
清空文件夹:gulp-clean
编译css:gulp-sass
压缩图片:gulp-imagemin
深度压缩图片:imagemin-pngquant
压缩css:gulp-cssmin
css前缀:gulp-autoprefixer
压缩js:gulp-uglify
ES6转ES5:gulp-babel
套件1:@babel/core
套件2:@babel/preset-env
压缩html:gulp-htmlmin
服务器插件:gulp-webserver
文件重命名:gulp-rename
合并js文件:gulp-concat
四、gulp常用项目流程操作及部分插件使用方法
- 开始之前先引入将来要使用到的插件模块
例:
const gulp = require("gulp");
const cssmin = require("gulp-cssmin");
const autoprefixer = require("gulp-autoprefixer");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const htmlmin = require("gulp-htmlmin");
const webserver = require("gulp-webserver");
- css处理方式
例:
// 处理css的指令:压缩,添加兼容前缀
function cssFn(){
return gulp.src("./project/css/**/*")
.pipe(autoprefixer("last 2 version","safari 5","ie 8","ie 9","opera 12.1","ios 6","android 4"))
.pipe(cssmin())
.pipe(gulp.dest("./server/css"))
}
module.exports.css = cssFn; // module.可省略
- js处理方式
例:
// 处理js的指令:ES6编译ES5,压缩
function jsFn(){
return gulp.src("./project/js/**/*")
.pipe(babel({
presets:["@babel/env"]
}))
.pipe(uglify())
.pipe(gulp.dest("./server/js"))
}
exports.js = jsFn;
- html处理方式
例:
// 处理html的指令:压缩
function htmlFn(){
return gulp.src("./project/pages/**/*")
.pipe(htmlmin({
removeEmptyAttributes:true,
collapseWhitespace:true
}))
.pipe(gulp.dest("./server/pages"))
}
exports.html = htmlFn;
- 处理静态资源
例:
function staticFn(){
// 找到要处理的静态资源文件
return gulp.src("./src/static/**")
// 直接转存
.pipe(gulp.dest("./dist/static"))
}
// 暴露调用方式
exports.static = staticFn;
- 删除文件夹
例:
function cleanFn(){
// 找到要删除的文件目录
return gulp.src("./ded")
// 直接删除
.pipe(clean())
}
// 暴露调用方式
exports.clean = cleanFn;
- 服务器配置
例:
function serverFn(){
// 找到要指定为根目录的文件夹
return gulp.src("./ded")
// 执行服务器方式,并开始配置信息
.pipe(webserver({
// 指定访问地址
host:"localhost",
// 指定端口
port:3000,
// 开启自动刷新
livereload:true,
// 服务器开启后,自动打开的页面
open:"./pages/index.html",
proxies:[{
// 代理之后的请求地址
source:"./chapters",
// 被代理的跨域地址
target:"http://wanandroid.com/wxarticle/chapters/json"
}]
}))
}
// 暴露调用方式
exports.server = serverFn;
- 开启监听
例:
function watchFn(){
// 监听所有css文件
gulp.watch("./src/css/**",cssFn);
// 监听所有js文件
gulp.watch("./src/js/**",jsFn);
// 监听所有html文件
gulp.watch("./src/pages/**",htmlFn);
// 监听所有static文件
gulp.watch("./src/static/**",staticFn);
}
// 暴露调用方式
exports.watch = watchFn;
- 批量执行
注意:
gulp.series():同步执行内部命令
gulp.parallel():异步执行内部命令
例:
exports.all = gulp.series(
gulp.parallel(cssFn,jsFn,htmlFn,staticFn),
gulp.parallel(serverFn,watchFn)
);
【附:gulp 官网:gulp官网 (内附众多中文网链接,请尽情“食用”)】