WeChat applet-gulp processing files

Lazy cancer posted code directly, I want to write
it because I recently engaged in a small program, it feels a little uncomfortable to directly use the developer tools of WeChat, and read a few blogs for slimming the small program, decided to make a project for my own Set of configuration files, used gulpto support sass scssfile compilation and blank lines of compressed files before uploading and the like.

As for the reason why gulp is not used in webpack, because I do n’t want to deal with js files, maybe I researched and understood it. In the future, you can also add the function of uploading the resources in the assets directory to ftp or cdn ~

JSON

jsonFiles are copied directly to the distdirectory during development, and jsonminifycompression is used during production

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

wxmlFiles are copied directly to the distdirectory during development, and htmlmincompression is used during production

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

wxssFiles, this process is much more, when you are not using it, you can only use css, which sassis a bit painful for people like me . So sasssupport was added , .sassfiles that support suffixes will be compiled into a wxssformat, and the original wxssfile also supports scsssyntax

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

Although the IDE of WeChat also supports ES6, it is not perfect yet, so I use Babel to compile js. Js compressed with uglify

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');
})

rely

Here gulp-jsonminify2 and his related dependencies have been fixed according to their own business to solve the problem of json empty object format failure

"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"
  }

Original address