博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用gulp搭建小程序开发编译环境
阅读量:6651 次
发布时间:2019-06-25

本文共 3962 字,大约阅读时间需要 13 分钟。

版本:v1.0

功能:

  • sass编译转wxss
  • es6转es5
  • js代码压缩
  • css代码压缩
  • 文件监控
  • json检测
  • 语法报错提示

//gulpfile.jsconst 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")const plumber = require("gulp-plumber")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/**/*.scss', ['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('images', () => {  return gulp.src('./src/images/**')    .pipe(gulp.dest('./dist/images'))})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,scss}', './src/**/*.{wxss,scss}', './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', './src/**/**/*.js']) .pipe(plumber({}, true, function (err) { console.log('ERROR!!!!'); console.log(err); })) .pipe(babel()) .pipe(gulp.dest('./dist'))})gulp.task('scriptsPro', () => { return gulp.src('./src/**/*.js') .pipe(plumber({}, true, function (err) { console.log('ERROR!!!!'); console.log(err); })) .pipe(babel()) .pipe(uglify({ compress: true, })) .pipe(gulp.dest('./dist'))})gulp.task('dev', ['clean'], () => { runSequence('json', 'assets', 'templates', // 'sass', 'images', 'wxss', 'scripts', 'watch');});gulp.task('build', [ 'jsonPro', 'assets', 'images', 'templatesPro', 'wxssPro', 'scriptsPro']);gulp.task('pro', ['clean'], () => { runSequence('build');})复制代码

运行

//编译gulp build//开发gulp dev复制代码

转载于:https://juejin.im/post/5cde21d05188250a9174d1c8

你可能感兴趣的文章
In-Stream Big Data Processing
查看>>
败者树_百度百科
查看>>
[转载]DB2与ORACLE、MYSQL比较2
查看>>
字符设备驱动笔记——异步通知(八)
查看>>
MVC4 开篇
查看>>
PHP发送HEAD方法请求
查看>>
python 模块路径
查看>>
OracleHelper[.Net 连接Oracle数据库的封装类]
查看>>
分带?不分带?
查看>>
一起Polyfill系列:Function.prototype.bind的四个阶段
查看>>
SharePoint 2013 中的SQL Server 安全
查看>>
SocketAsyncEventArgs的释放问题
查看>>
jQuery Custom Selector JQuery自定义选择器
查看>>
Android 带你从源码的角度解析Scroller的滚动实现原理
查看>>
学习NodeJS第一天:node.js引言
查看>>
四种途径将HTML5 web应用变成android应用
查看>>
微软职位内部推荐-Principal Software Eng Mgr
查看>>
MessageDigest简单介绍
查看>>
.net微信公众号开发——消息与事件
查看>>
动态网站维护基本命令
查看>>