懶癌直(zhi)接(jie)貼代碼，想寫在寫因(yin)為最近(jin)搞(gao)了(le)一(yi)下小(xiao)程序，直(zhi)接(jie)使用微信的(de)開發者(zhe)工具搞(gao)感覺(jue)有點不習慣，并且看了(le)幾篇給(gei)小(xiao)程序瘦身的(de)博客，決定(ding)給(gei)自(zi)己的(de)項目做(zuo)一(yi)套配置文件，使用gulp來支持sass ...
懶癌直接貼代碼，想寫在寫
因為最近搞了一下小程序，直接使用微信的開發者工具搞感覺有點不習慣，并且看了幾篇給小程序瘦身的博客，決定給自己的項目做一套配置文件，使用gulp來支持sass scss文件編譯(yi)以及上傳之(zhi)前壓縮文件的空行之(zhi)類的。
至(zhi)于(yu)使用(yong)gulp沒(mei)有使用(yong)webpack的原因(yin)，因(yin)為我不想處(chu)理js文件，可能是我研究明白吧。后續還可以添加把(ba)assets目錄里面的資(zi)源上傳到ftp或者cdn的功(gong)能~
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文件開發時候直接復制到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文件，這個處理就比較多了，沒有使用的時候只能使用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);
});
雖說(shuo)微信的(de)IDE也支持(chi)ES6，但(dan)是還不是很(hen)完善(shan)，所(suo)以我使用(yong)Babel編譯js。使用(yong)uglify壓縮的(de)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'))
})
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以(yi)及他相關(guan)的依賴(lai)根據(ju)自己的業務(wu)修復了一(yi)下解決(jue)了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"
}
