懒癌直接贴代码，想写在写
因为最近搞了一下小程序，直接使用微信的开发者工具搞感觉有点不习惯，并且看了几篇给小程序瘦身的博客，决定给自己的项目做一套配置文件，使用gulp来支持sass scss文件编译以及上传之前压缩文件的空行之类的。 至于使用gulp没有使用webpack的原因，因为我不想处理js文件，可能是我研究明白吧。后续还可以添加把assets目录里面的资源上传到ftp或者cdn的功能~
JSON
json文件开发时候直接复制到dist目录下，生产的时候使用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文件开发时候直接复制到dist目录下，生产的时候使用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，对于我这种习惯sass的人来说有点痛苦。于是添加了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 以及他相关的依赖根据自己的业务修复了一下解决了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" }