Gulp gulp构建是基于内存实现的，支持同时执行多个任务，效率较高，使用方式更直观易懂，插件生态也很完善安装gulp

gulp构建是基于内存实现的，支持同时执行多个任务，效率较高，使用方式更直观易懂，插件生态也很完善

安装gulp

yarn add gulp # or npm install gulp

安装gulp-load-plugins（加载插件）
gulp-sass(编译scss文件），
gulp-babel，@babel/core,@babel/preset-env（编译js）,
gulp-swig（编译html）,
gulp-imagemin（编译图片，字体）
browser-sync(服务器）
gulp-useref(引用文件）
gulp-ifdel（清除文件）
yarn add gulp-load-plugins gulp-sassgulp-babel @babel/core @babel/preset-envgulp-swiggulp-imagemin browser-sync gulp-useref del --dev

// 实现这个项目的构建任务 const {src, dest, parallel, series,watch} = require('gulp')

const del = require('del')

const gulpLoadPlugins = require('gulp-load-plugins')

const browserSync = require('browser-sync')

const plugins = gulpLoadPlugins()

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'}))

.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})) 
```
.pipe(dest('temp'))
```
.pipe(bs.reload({stream:true}))}
```
//图片编译

const image = () => {

return src('src/assets/images/**',{base:'src'})
```
.pipe(plugins.imagemin()) 
```
.pipe(dest('dist'))}

//字体编译

const fonts = () => {

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/*.scss',fonts)

// watch('public/**',extra)

watch([

'src/assets/images/**',

'src/assets/fonts/*.scss',

'public/**'],bs.reload)

bs.init({

notify:false,
```
  // 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,fonts,extra))

const develop = series(compile,serve)

module.exports = { build, develop, clean}