javascript Gulpfile.js（第3版）

Posted 2021-05-04

/*
* ------------------------------------------------------------------------------
* Gulpfile.js
* https://gulpjs.com/
* ------------------------------------------------------------------------------
*/

// ** plugins
var gulp = require('gulp'); // npm install gulp@3.9.1
var sourcemaps = require('gulp-sourcemaps'); // npm install gulp-sourcemaps
var uglify = require('gulp-uglify'); // npm install gulp-uglify
var autoprefixer = require('gulp-autoprefixer'); // npm install gulp-autoprefixer
var cleanCSS = require('gulp-clean-css'); // npm install gulp-clean-css
var sass = require('gulp-sass'); // npm install gulp-sass
var rename = require('gulp-rename'); // npm install gulp-rename
var sassGlob = require('gulp-sass-glob'); // npm install gulp-sass-glob
var browserify = require('browserify'); // npm install browserify
var babelify = require('babelify'); // npm install babelify
var source = require('vinyl-source-stream'); // npm install vinyl-source-stream
var buffer = require('vinyl-buffer'); // npm install vinyl-buffer
var es = require('event-stream'); // npm install event-stream

// ** paths
var paths = {
  styles: {
    scssInput: 'assets/uncompiled/scss/*.scss',
    modules: 'components/**/**/*.scss',
    cssInput: 'assets/uncompiled/css/*.css',
    cssDest: 'assets/uncompiled/css/',
    cssDestMin: 'assets/build/css/'
  },
  scripts: {
    inputs: [
      './assets/uncompiled/js/page-home.js',
      './assets/uncompiled/js/page-about.js',
      './assets/uncompiled/js/page-contact.js',
    ],
    modules: 'assets/uncompiled/js/modules/*.js',
    dest: 'assets/build/js/'
  }
};

// ** options
var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'expanded'
};

// ** error log
function errorLog(error) {
  console.error.bind(error);
  this.emit('end');
}

// ** scss -> css -> minify
gulp.task('css', function () {
  return gulp
  .src(paths.styles.scssInput)
  .pipe(sassGlob())
  .pipe(sass(sassOptions)).on('error', sass.logError)
  .pipe(autoprefixer({
    grid: true
  }))
  .pipe(gulp.dest(paths.styles.cssDest))
  .pipe(cleanCSS())
  .pipe(rename({
    suffix: '.min'
  }))
  .pipe(gulp.dest(paths.styles.cssDestMin));
});

// minify scripts
gulp.task('scripts', function () {
  var tasks = paths.scripts.inputs.map(function (entry) {
    return browserify({
      entries: [entry],
      debug: true
    })
    .transform(babelify, {
      presets: ["@babel/preset-env"]
    })
    .bundle()
    .pipe(source(entry))
    .pipe(buffer())
    // .pipe(sourcemaps.init())
    .pipe(uglify())
    // .pipe(sourcemaps.write('./'))
    .pipe(rename({
      dirname: '',
      extname: '.min.js'
    }))
    .pipe(gulp.dest(paths.scripts.dest))
  });
  
  return es.merge.apply(null, tasks);
});

// ** watch task - will only run when it detects an update
gulp.task('watch', function () {
  gulp.watch(paths.styles.scssInput, ['css']);
  gulp.watch(paths.styles.modules, ['css']);
  gulp.watch(paths.styles.cssInput, ['css']);
  gulp.watch(paths.scripts.inputs, ['scripts']);
  gulp.watch(paths.scripts.modules, ['scripts']);
});

// ** tasks
gulp.task('default', [
  'css',
  'scripts',
  'watch'
]);