gulp4 ---gulpfile.js

gulp4 版本使用案例

gulp.js

const {src, dest, watch, parallel} = require('gulp');
const concat = require('gulp-concat');
const minifyCSS = require('gulp-minify-css');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const minifyHTML = require('gulp-minify-html');
const webserver = require('gulp-webserver');

const cssConfig = require('./build/css.config');
const jsConfig = require('./build/js.config');

// 处理所有的css文件
const handleCSS = (cb)=>{
  // 处理所有的css
  Object.entries(cssConfig).forEach((item)=>{
    let key =item[0];
    let value =item[1];
    src(value)
    .pipe(concat(`${key}.css`))
    .pipe(minifyCSS())
    .pipe(dest('./dist/css'));
  })
  // 结束任务
  cb();
}


// 处理js库
const handleLibJS = () => {
  return src('./src/lib/**/*.js')
  .pipe(dest('./dist/lib'));
}

// 处理js
const handleJS = (cb) => {
  // 处理所有的css
  Object.entries(jsConfig).forEach((item)=>{
    let key =item[0];
    let value =item[1];
    src(value)
    .pipe(concat(`${key}.js`))
    .pipe(uglify())
    .pipe(dest('./dist/js'));
  })
  // 结束任务
  cb();
}

// 处理图片
const handleIMG = () => {
  return src('./src/assets/**/*')
  .pipe(dest('./dist/assets'));
}

// 处理字体
const handleFont = ()=>{
  return src('./src/css/**/*.ttf')
  .pipe(dest('./dist/css'));
}


// 处理html
const handleHTML = () => {
  return src(require('./build/html.config'))
  .pipe(minifyHTML())
  .pipe(dest('./dist/views'));
}

// 开启服务
const server = ()=>{
  return src('./')
  .pipe(webserver({
      livereload: true,
      directoryListing: true,
      middleware: require('./data/mockDataMiddleware')
  }))
};

const watchTask = ()=>{
  return watch('./src/**/*', {ignoreInitial: false, delay: 500}, parallel(handleCSS, handleLibJS, handleJS, handleIMG, handleFont, handleHTML));
};

if(process.env.NODE_ENV === 'production'){
  exports.default = parallel(handleCSS, handleLibJS, handleJS, handleIMG, handleFont, handleHTML);
}
else{
  exports.default = parallel(
    watchTask,
    server
  );
}

css.config.js

module.exports = {
  // 每一个页面都要用的css
  style: [
    './src/css/**/*.css'
  ],
  home: [
    // 需要调用公共组件的样式
    './src/components/header/header.css',
    './src/components/refresh-loadmore/scroll.css',
    './src/components/tabbar/tabbar.css',
    './src/components/loading/loading.css',
    // 自己的样式
    './src/views/home/**/*.css'
  ],
  detail: [
    './src/components/header/header.css',
    // 自己的样式
    './src/views/detail/**/*.css'
  ],
  login: [
    './src/components/header/header.css',
    './src/views/login/**/*.css'
  ],
  mine: [
    './src/components/tabbar/tabbar.css',
    './src/components/header/header.css',
    './src/views/mine/**/*.css'
  ],
  regiester: [
    './src/components/header/header.css',
    './src/views/regiester/**/*.css'
  ],
  search: [
    './src/components/tabbar/tabbar.css',
    './src/views/search/**/*.css'
  ],
  like: [
    './src/views/like/**/*.css'
  ]
}

js.config.js

module.exports = {
  home: [
    './src/utils/api.js',
    './src/utils/user.js',
    './src/components/refresh-loadmore/scroll.js',
    './src/components/tabbar/tabbar.js',
    './src/components/loading/loading.js',
    './src/views/home/**/*.js'
  ],
  detail: [
    './src/components/header/header.js',
    './src/utils/api.js',
    './src/utils/tools.js',
    './src/views/detail/**/*.js',
  ],
  login: [
    './src/components/header/header.js',
    './src/views/login/**/*.js'
  ],
  mine: [
    './src/utils/api.js',
    './src/utils/user.js',
    './src/components/tabbar/tabbar.js',
    './src/views/mine/**/*.js'
  ],
  regiester: [
    './src/utils/api.js',
    './src/utils/user.js',
    './src/components/header/header.js',
    './src/views/regiester/**/*.js'
  ],
  search: [
    './src/components/tabbar/tabbar.js',
    './src/views/search/**/*.js'
  ],
  like: [
    './src/views/like/**/*.js'
  ]
}

html.config.js

module.exports = [
  './src/views/detail/*.html',
  './src/views/home/*.html',
  './src/views/login/*.html',
  './src/views/mine/*.html',
  './src/views/regiester/*.html',
  './src/views/search/*.html',
  './src/views/like/*.html'
]

dist 目录

• assets
• views
• css
• js
• lib