258资源分享网

懒癌直接贴代码，想写在写因为最近搞了一下小程序，直接使用微信的开发者工具搞感觉有点不习惯，并且看了几篇给小程序瘦身的博客，决定给自己的项目做一套配置文件，使用gulp来支持sass ...

 

 

 

懒癌直接贴代码，想写在写
因为最近搞了一下小程序，直接使用微信的开发者工具搞感觉有点不习惯，并且看了几篇给小程序瘦身的博客，决定给自己的项目做一套配置文件，使用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'); }) 依赖