Gulp 進階

依據開發環境調整輸出內容

minimist、gulp-if

安裝

$ npm install --save minimist gulp-if

配置 gulpfile.js

var minimist = require('minimist');

var envOptions = {
  string: 'env',
  default: { env: 'develop' }
}

var options = minimist(process.argv.slice(2), envOptions);
console.log(options);

// sass
.pipe($.if(options.env === 'production', $.cleanCss()))

// babel
.pipe($.if(options.env === 'production', $.uglify({
      compress: {
        drop_console: true
      }
    })))

輸出判斷

develop

$ gulp

production

$ gulp --env production

釋出開發成品

gulp-clean

安裝

$ npm install --save gulp-clean

配置 gulpfile.js

gulp.task('clean', function () {
  return gulp.src(['./.tmp', './public'], {read: false, allowEmpty: true})
      .pipe($.clean());
});

gulp.task('build',
  gulp.series(
    'clean',
    gulp.parallel('jade', 'sass', 'babel', 'bower'),
    'vendorJs'
  )
);

如果沒加上 allowEmpty: true

會發生 clean ERROR 如下:

Error: File not found with singular glob: /Users/kucc/Desktop/DemoGulp/.tmp (if this was purposeful, use `allowEmpty` option)

圖片壓縮技巧

imagemin

安裝

$ npm install --save gulp-imagemin

配置 gulpfile.js

gulp.task('image-min', () => {
  return gulp.src('./source/images/*')
    .pipe($.if(options.env === 'production', $.imagemin()))
    .pipe(gulp.dest('./public/images/'))
});

圖片如果已經壓縮過，那這個功能的效用就發揮不大 ~


一鍵部署到 Github Pages

gulp-gh-pages

安裝

$ npm install --save gulp-gh-pages

配置 gulpfile.js

gulp.task('d', () => {
  return gulp.src('./public/**/*')
    .pipe($.ghPages());
});

npm install 中 –save 和 –save-dev 差異

只安裝 dependencies 中套件

$ npm install --only=prod

只安裝 devDependencies

$ npm install --only=dev

只保留 dependencies 中套件

$ npm prune --prod