前段时间写了一点点的webpack学习见解,其实也是很简单的说了对webpack的理解。平时的项目中用的最多的自动化构建工具就是webpack,但是很早之前也听过gulp,就是没在项目中使用过,所以最近没事的时候,就学习了一下gulp的使用(想再以后的工作中装一波)
我个人的理解gulp是短小精悍,可以用很少的代码完成整个项目的自动化构建。
话不多说。现在就来看看使用gulp是如何构建项目的吧。
一、初始化项目、安装gulp
yarn init -y
yarn add gulp
二、创建gulpfile.js文件
首先是在项目根路径下创建这个文件,因为这是gulp运行时候的入口文件(可以在node_modules/gulp-cli/bin/index.js里面看到)
三、在入口文件里引入需要的方法
const { src,dest,parallel,series,watch } = require('gulp')
const del = require('del')
const browserSync = require('browser-sync')
const loadPlugin = require('gulp-load-plugins')
四、可以写一些方法
// 方法一
const plugins = loadPlugin()
const bs = browserSync.create()
// 方法二
// const sass = require('gulp-sass')
// const babel = require('gulp-babel')
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')
const data = {
menus: [
{
name: 'Home',
icon: 'aperture',
link: 'index.html'
},
{
name: 'Features',
link: 'features.html'
},
{
name: 'About',
link: 'about.html'
},
{
name: 'Contact',
link: '#',
children: [
{
name: 'Twitter',
link: 'https://twitter.com/w_zce'
},
{
name: 'About',
link: 'https://weibo.com/zceme'
},
{
name: 'divider'
},
{
name: 'About',
link: 'https://github.com/zce'
}
]
}
],
pkg: require('./package.json'),
date: new Date()
}
const clean = () => {
return del(['dist','temp'])
}
const style = () => {
return src('src/assets/styles/*.scss',{base:'src'})
.pipe(plugins.sass({outputStyle:'expanded'})) // outputStyle:'expanded' 可以把css最后结尾的花括号放在空格处
.pipe(dest('temp'))
.pipe(bs.reload({stream:true}))
}
const script = () => {
return src('src/assets/scripts/*.js',{base:'src'})
.pipe(plugins.babel({presets:['@babel/preset-env']}))
.pipe(dest('temp'))
.pipe(bs.reload({stream:true}))
}
const page = () => {
return src('src/*.html',{base:'src'})
.pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
.pipe(dest('temp'))
.pipe(bs.reload({stream:true}))
}
const image = () => {
return src('src/assets/images/**',{base:'src'})
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
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'))
}
const serve = () => {
watch('src/assets/styles/*.scss',style)
watch('src/assets/scripts/*.js',script)
watch('src/*.html',page)
// watch('src/assets/images/**',image)
// watch('src/assets/fonts/**',font)
// watch('public/**',extra)
watch([
'src/assets/images/**',
'src/assets/fonts/**',
'public/**'
],bs.reload)
bs.init({
notify:false,
// port:9528,
// files:'dist/**',
server:{
baseDir:['temp','src','public'],
routes:{
'/node_modules':'node_modules'
}
}
})
}
const useref = () => {
return src('temp/*.html',{base:'temp'})
.pipe(plugins.useref({searchPath:['temp','.']}))
// html css js压缩代码
.pipe(plugins.if(/\.js$/,plugins.uglify()))
.pipe(plugins.if(/\.css$/,plugins.cleanCss()))
.pipe(plugins.if(/\.html$/,plugins.htmlmin({
collapseWhitespace:true,
minifyCSS:true,
minifyJS:true
})))
.pipe(dest('dist'))
}
const compile = parallel(style,script,page)
// 上线之前执行的任务
const build = series(
clean,
parallel(
series(compile,useref),
image,
font,
extra
)
)
const dev = series(compile,serve)
module.exports = {
build,
dev,
clean
}