常用插件

less 编译

less 编译需要使用 gulp-less 插件。

yarn add gulp-less

基本任务流程为:

let gulp = require('gulp')
let less = require('gulp-less')
let rename = require('gulp-rename')
gulp.task('build:less', () => {
  gulp
  .src(['src/pages/**/*.less'], { base: 'src' })
  .pipe(less())
  .pipe(
    rename(path => {
      path.extname = '.css'
    })
  )
  .pipe(gulp.dest('dist'))
})

此任务将 less 文件编译为 css,输出到 dist 目录下。

css 后处理

gulp-postcssless-postcss 可以自动往 css 中添加兼容性代码,配合着 autoprefixer,可以自动往 css 中添加前缀,比如 -webkit-

gulp-cssnano 可以压缩css代码。

yarn add gulp-postcss gulp-cssnano

基本任务流程为:

let gulp = require('gulp')
let less = require('gulp-postcss')
let cssnano = require('gulp-cssnano')
let autoprefixer = require('autoprefixer')
gulp.task('build:css', () => {
  gulp
  .src(['src/pages/**/*.css'], { base: 'src' })
  .pipe(
    postcss([
      autoprefixer([
        'iOS >= 8',
        'Android >= 4.1'
      ])
    ])
  )
  .pipe(
    cssnano({
      zindex: false,
      autoprefixer: false,
      discardComments: { removeAll: true }
    })
  )
  .pipe(gulp.dest('dist'))
})

css Base64

可以使用 gulp-css-base64 将 css 中的 图片路径转化为 base64

yarn add gulp-postcss gulp-css-base64

基本任务流程为:

const gulp = require('gulp')
const cssBase64 = require('gulp-css-base64')
gulp.task('build:css', function () {
  gulp.src('src/**/**.css')
    .pipe(cssBase64({
      baseDir: "../../images",
      maxWeightResource: 100,
      extensionsAllowed: ['.gif', '.jpg']
    }))
    .pipe(gulp.dest('dist'))
})

css 压缩与合并

使用 gulp-minify 可以将 css 压缩,使用 gulp-concat 可以将多个 css 合并到一个文件。

yarn add gulp-minify gulp-concat

基本任务流程为:

const gulp = require('gulp')
const rename = require('gulp-rename')
const minify = require('gulp-minify')
const concat = require('gulp-concat')
gulp.task('minifyCss', function(){
  return gulp.src('public/css/*.css')
    .pipe(rename({suffix: '.min'}))
    .pipe(minify())
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dist/css'));
});

javascript 处理

使用 gulp-babel 将 ES6 语法转化为 ES5.

使用 gulp-uglify 将 js 文件压缩。

yarn add gulp-uglify
yarn add gulp-babel babel-core babel-preset-env

基本任务流程为:

let gulp = require('gulp')
let uglify = require('gulp-uglify')
let pump = require('pump')
gulp.task('build:js', cb => {
  pump([
    gulp.src(['src/pages/**/*.js'], { base: 'src' }),
    babel({
        presets: ['env']
    }),
    uglify(),
    gulp.dest('dist')
  ], cb)
})

html 压缩

可以使用 gulp-htmlmingulp-htmlclean 对HTML文件压缩。

yarn add gulp-htmlmin

基本任务流程为:

let gulp = require('gulp')
let htmlmin = require('gulp-htmlmin')
gulp.task('build:html', () => {
  gulp.src(['src/pages/**/*.html'], { base: 'src' })
    .pipe(htmlmin({
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('dist'))
})

image 压缩

使用 gulp-imagemin 可以压缩 PNG, JPEG, GIF and SVG 图片。

yarn add gulp-imagemin

基本任务流程为:

const imagemin = require('gulp-imagemin');
gulp.task('build:image', () =>
  gulp.src(files.image, { base })
    .pipe(imagemin())
    .pipe(gulp.dest('dist'))
)

json 压缩

使用 gulp-json-minify 可以压缩 json 文件。

npm i -S gulp-json-minify

基本任务流程为:

const jsonMinify = require('gulp-json-minify')
const files = {
	json: ['src/**/*.json']
}
gulp.task('build:json', function() {
  gulp.src(files.json, { base })
    .pipe(jsonMinify())
    .pipe(gulp.dest(dist))
    .on('error', util.log)
})

添加 banner

可以使用 gulp-header 为文件添加文件头。

yarn add gulp-postcss gulp-header

基本任务流程为:

let gulp = require('gulp')
let header = require('gulp-header')
let pkg = require('./package.json')
gulp.task('build:less', () => {
  let banner = [
`/*!
  * wxDYT v${pkg.version}'
  * Copyright ${new Date().getFullYear()} DYT, Inc.'
  * Licensed under the ${pkg.license} license'
  * Created by ${pkg.author}'
  */
`].join('\n');
  gulp
    .src(['src/pages/**/*.less'], { base: 'src' })
    .pipe(less())
    .pipe(header(banner, { pkg: pkg }))
    .pipe(
      rename(path => {
        path.extname = '.wxss'
      })
    )
  .pipe(gulp.dest('dist'))
})

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress