在Gulp中的使用插件进行文件操作
一、使用gulp-sass转换scss文件
先单独为node-sass配置镜像源
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
因为在安装gulp-sass的时候,它内部会去安装node-sass,而node-sass是一个C++的模块,它内部会有对C++程序集的依赖,这些二进制的包需要通过国外的站点去下载,可能会下载不下来,所以我们通过淘宝的镜像源去单独为node-sass配置镜像源。
安装gulp-sass
yarn add gulp-sass --dev
使用gulp-sass
const { src, dest } = require("gulp")
const sass = require('gulp-sass')
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' }) // base定义基准路径,我们设置为src,这样就会把src后面的目录结构保存下来
.pipe(sass({outputStyle: "expanded"})) /* 基本上每个插件提供的都是一个函数,函数的调用结果会返回一个文件的转换流 */
/* 注意:sass在运行的时候会忽略 _下划线开头的文件,它会认为这种文件都是我们在主文件中依赖的文件,就不会被转换
sass转换的css文件每个样式的最后一个大括号不会空行,我们可以通过配置选项 outputStyle: "expanded" 使之空行(完全展开)*/
.pipe(dest('dist'))
}
module.exports = {
style
}
文件目录结构是这样的
运行yarn gulp style
成功将main.scss文件转换成main.css文件
二、使用gulp-babel转换js文件
安装
yarn add gulp-babel @babel/core @babel/preset-env --dev
使用
const { src, dest } = require("gulp")
const babel = require("gulp-babel")
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(babel({ presets:['@babel/preset-env']})) // 如果这里没有配置presets的话,也是可以转换,但是转换前后几乎没什么区别,也可以通过babelrc文件去配置
.pipe(dest('dist'))
}
module.exports = {
script
}
运行
yarn gulp script
结果
转换前
// TODO: site logics
$(($) => {
const $body = $('html, body')
$('#scroll_top').on('click', () => {
$body.animate({ scrollTop: 0 }, 600)
return false
})
})
转换后
"use strict";
// TODO: site logics
$(function ($) {
var $body = $('html, body');
$('#scroll_top').on('click', function () {
$body.animate({
scrollTop: 0
}, 600);
return false;
});
});
三、使用模板引擎插件gulp-swig用于处理html文件
安装
yarn add gulp-swig --dev
使用
const { src, dest } = require("gulp")
const swig = require("gulp-swig")
const data = {
str:"this is demo"
}
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(swig({ data })) // 配置data,就是模板需要的数据,data: data简写为data
.pipe(dest('dist'))
}
module.exports = {
page
}
运行yarn gulp page
转换前
{{str}}
转换后
this is demo
四、使用gulp-imagemin插件转换图片和字体
安装cnpm i gulp-imagemin -D
由于gulp-imagemin内部也是依赖于一些通过C++完成的模块,只要是通过C++完成的模块,就涉及到二进制的程序集,这些程序集大都在github上下载,下载会比较慢,我之前使用yarn下载花了三分钟左右,而且有时候下载不下来,改用cnpm会更好。
使用
const { src, dest} = require("gulp")
const imagemin= require("gulp-imagemin")
const image = () => {
return src('src/assets/images/**', { base: 'src' })
.pipe(imagemin())
.pipe(dest('dist'))
}
// 字体文件其实只需要拷贝过去就好了,但是里面也有svg文件,所以这里也用imagemin转换一下
const font = () => {
return src('src/assets/fonts/**', { base: 'src' })
.pipe(imagemin())
.pipe(dest('dist'))
}
module.exports = {
image,
font
}
运行
yarn gulp image
yarn gulp font
命令行中会显示图片被压缩的百分比,并且这种压缩是无损的,只是清除了图片信息中的无用数据。
五、使用gulp-load-plugins避免重复引入插件动作
安装
yarn add gulp-load-plugins --dev
使用
// gulp-load-plugins导出的是一个方法,通过这个方法可以得到一个对象,所有的插件都会成为对象上的属性
// 例如 gulp-sass就是plugins.sass,如果是gulp-sass-sass这种类型,就是plugins.sassSass驼峰式
const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' }) // base定义基准路径,我们设置为src,这样就会把src后面的目录结构保存下来
.pipe(plugins.sass({outputStyle: "expanded"}))
.pipe(dest('dist'))
}
module.exports = {
style
}
一样可以正常运行style任务
六、使用del插件清除文件
安装
yarn add del --dev
del插件不是gulp插件,但是可以在gulp中使用,主要是用来转换文件之前清除dist文件
const del = require("del")
const clean = () => {
return del(['dist']) // 会返回一个promise对象,通过promise的状态结束任务
}
module.export = {
clean
}
七、梳理代码
const { src, dest, parallel, series } = require("gulp")
const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()
const del = require("del")
const data = {
str: 'this is demo'
}
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })
.pipe(plugins.sass({outputStyle: "expanded"}))
.pipe(dest('dist'))
}
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(plugins.babel({ presets:['@babel/preset-env']}))
.pipe(dest('dist'))
}
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(plugins.swig({ data }))
.pipe(dest('dist'))
}
const image = () => {
return src('src/assets/images/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
// 字体文件其实只需要拷贝过去就好了,但是里面也有svg文件,所以这里也用imagemin转换一下
const font = () => {
return src('src/assets/fonts/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
// 处理一些额外的文件
const extra = () => {
return src('public/**', { base: 'public' })
.pipe(dest('dist'))
}
// 转换文件前清除dist
const clean = () => {
return del(['dist'])
}
// 组合上面的任务,因为这些任务并没有什么牵连,可以同时进行,所以使用parallel
/* 定义compile处理src目录下的文件 */
const compile = parallel(style, script, page, image, font)
// 定义build处理所有文件
// 因为我们要先删除,再生成,所以要用series串行执行任务
const build = series(clean, parallel(extra, compile))
module.exports = {
build
}
执行yarn add build
就能将src目录以及public目录的文件转换,转换前会清空dist文件