懶癌直接貼代碼，想寫在寫
因為最近搞了一下小程序，直接使用微信的開發(fā)者工具搞感覺有點(diǎn)不習(xí)慣，并且看了幾篇給小程序瘦身的博客，決定給自己的項目做一套配置文件，使用gulp來支持sass scss文件編譯以及上傳之前壓縮文件的空行之類的。

至于使用gulp沒有使用webpack的原因，因為我不想處理js文件，可能是我研究明白吧。后續(xù)還可以添加把a(bǔ)ssets目錄里面的資源上傳到ftp或者cdn的功能~

JSON

json文件開發(fā)時候直接復(fù)制到dist目錄下，生產(chǎn)的時候使用jsonminify壓縮

gulp.task('json',() => {
  return gulp.src('./src/**/*.json')
    .pipe(gulp.dest('./dist'))
})

gulp.task('jsonPro',  () => {
  return gulp.src('./src/**/*.json')
    .pipe(jsonminify())
    .pipe(gulp.dest('./dist'))
})

wxml

wxml文件開發(fā)時候直接復(fù)制到dist目錄下，生產(chǎn)的時候使用htmlmin壓縮

gulp.task('templates', () => {
  return gulp.src('./src/**/*.wxml')
    .pipe(gulp.dest('./dist'))
})

gulp.task('templatesPro', () => {
  return gulp.src('./src/**/*.wxml')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true,
      keepClosingSlash: true
    }))
    .pipe(gulp.dest('./dist'))
});

wxss

wxss文件，這個處理就比較多了，沒有使用的時候只能使用css，對于我這種習(xí)慣sass的人來說有點(diǎn)痛苦。于是添加了sass支持，支持了.sass后綴的文件，會編譯成wxss格式的，原有wxss文件中也支持了scss語法

gulp.task('wxss', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.{wxss,sass}', '!./src/styles/**']),
    sass().on('error', sass.logError), // gulp sass編譯
    autoprefixer([
      'iOS >= 8',
      'Android >= 4.1'
    ]), // autoprofixer 自動添加
    rename((path) => path.extname = '.wxss'), //重命名
    gulp.dest('./dist')
  ]);

  combined.on('error', handleError);
});

gulp.task('wxssPro', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.{wxss,sass}', '!./src/styles/**']),
    sass().on('error', sass.logError),
    autoprefixer([
      'iOS >= 8',
      'Android >= 4.1'
    ]),
    minifycss(), // 壓縮 css文件
    rename((path) => path.extname = '.wxss'),
    gulp.dest('./dist')
  ]);

  combined.on('error', handleError);
});

JavaScript

雖說微信的IDE也支持ES6，但是還不是很完善，所以我使用Babel編譯js。使用uglify壓縮的js

gulp.task('scripts', () => {
  return gulp.src('./src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'))
})

gulp.task('scriptsPro', () => {
  return gulp.src('./src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify({
      compress: true,
    }))
    .pipe(gulp.dest('./dist'))
})

gulpfile.js

const gulp = require('gulp')
const del = require('del')
const path = require('path')
const autoprefixer = require('gulp-autoprefixer')
const htmlmin = require('gulp-htmlmin')
const sass = require('gulp-sass')
const jsonminify = require('gulp-jsonminify2')
const gutil = require('gulp-util')
const combiner = require('stream-combiner2');
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const rename = require("gulp-rename")
const minifycss = require('gulp-minify-css')
const runSequence = require('run-sequence')
const jsonlint = require("gulp-jsonlint")

var colors = gutil.colors;
const handleError = function(err) {
  console.log('\n')
  gutil.log(colors.red('Error!'))
  gutil.log('fileName: ' + colors.red(err.fileName))
  gutil.log('lineNumber: ' + colors.red(err.lineNumber))
  gutil.log('message: ' + err.message)
  gutil.log('plugin: ' + colors.yellow(err.plugin))
};

gulp.task('clean', () => {
  return del(['./dist/**'])
})

gulp.task('watch', () => {
  gulp.watch('./src/**/*.json', ['json']);
  gulp.watch('./src/assets/**', ['assets']);
  gulp.watch('./src/**/*.wxml', ['templates']);
  gulp.watch('./src/**/*.wxss', ['wxss']);
  gulp.watch('./src/**/*.sass', ['wxss']);
  gulp.watch('./src/**/*.js', ['scripts']);
});

gulp.task('jsonLint', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.json']),
    jsonlint(),
    jsonlint.reporter(),
    jsonlint.failAfterError()
  ]);

  combined.on('error', handleError);
});

gulp.task('json', ['jsonLint'], () => {
  return gulp.src('./src/**/*.json')
    .pipe(gulp.dest('./dist'))
})

gulp.task('jsonPro', ['jsonLint'], () => {
  return gulp.src('./src/**/*.json')
    .pipe(jsonminify())
    .pipe(gulp.dest('./dist'))
})

gulp.task('assets', () => {
  return gulp.src('./src/assets/**')
    .pipe(gulp.dest('./dist/assets'))
})

gulp.task('templates', () => {
  return gulp.src('./src/**/*.wxml')
    .pipe(gulp.dest('./dist'))
})

gulp.task('templatesPro', () => {
  return gulp.src('./src/**/*.wxml')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true,
      keepClosingSlash: true
    }))
    .pipe(gulp.dest('./dist'))
});

gulp.task('wxss', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.{wxss,sass}', '!./src/styles/**']),
    sass().on('error', sass.logError),
    autoprefixer([
      'iOS >= 8',
      'Android >= 4.1'
    ]),
    rename((path) => path.extname = '.wxss'),
    gulp.dest('./dist')
  ]);

  combined.on('error', handleError);
});

gulp.task('wxssPro', () => {
  var combined = combiner.obj([
    gulp.src(['./src/**/*.{wxss,sass}', '!./src/styles/**']),
    sass().on('error', sass.logError),
    autoprefixer([
      'iOS >= 8',
      'Android >= 4.1'
    ]),
    minifycss(),
    rename((path) => path.extname = '.wxss'),
    gulp.dest('./dist')
  ]);

  combined.on('error', handleError);
});

gulp.task('scripts', () => {
  return gulp.src('./src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'))
})

gulp.task('scriptsPro', () => {
  return gulp.src('./src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify({
      compress: true,
    }))
    .pipe(gulp.dest('./dist'))
})

gulp.task('dev', ['clean'], () => {
  runSequence('json',
    'assets',
    'templates',
    // 'sass',
    'wxss',
    'scripts',
    'watch');
});

gulp.task('build', [
  'jsonPro',
  'assets',
  'templatesPro',
  'wxssPro',
  'scriptsPro'
]);

gulp.task('pro', ['clean'], () => {
  runSequence('build');
})

依賴

這里的gulp-jsonminify2以及他相關(guān)的依賴根據(jù)自己的業(yè)務(wù)修復(fù)了一下解決了json空對象格式失敗的問題

"dependencies": {
    "autoprefixer": "^6.6.0",
    "babel-eslint": "^7.1.1",
    "babel-preset-latest": "^6.16.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-eslint": "^3.0.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-jsonlint": "^1.2.0",
    "gulp-jsonminify2": "^1.0.0",
    "gulp-load-plugins": "^1.4.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-postcss": "^6.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "run-sequence": "^1.2.2",
    "stream-combiner2": "^1.1.1"
  }