gulp的使用笔记

安装依赖

  yarn add gulp --dev

根目录添加gulpfile.js文件，并添加以下代码

ES6转ES5，并压缩

  yarn add gulp-babel gulp-uglify --dev

  const { src, dest, task, parallel } = require('gulp');
  const uglify = require('uglify');
  const babel = require('gulp-babel');

  task('js', function () {
    return src('resources/js/chatLib.js')
          .pipe(babel())
          .pipe(uglify())
          .pipe(dest('dist/js')) // 输出目录
  });

  task('default', parallel('js'));

压缩css，less，sass

  yarn add gulp-minify-css gulp-ruby-sass gulp-less --dev

  const { src, dest, task, parallel } = require('gulp');
  const minifyCSS = require('gulp-minify-css');
  const sass = require('gulp-ruby-sass');
  const less = require('gulp-less');

  // css
  task('css', function () {
    return src('resources/css/*.css')
          .pipe(minifyCSS())
          .pipe(dest('dist/css'))
  });

  // sass
  task('sass', function () {
    return sass('resources/css/*.scss')
          .on('error', function (err) {
            console.error('Error!', err.message);
          })
          .pipe(minifyCSS())
          .pipe(dest('dist/css'))
  });

  // less
  task('less', function () {
  return src('resources/css/*.less')
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(dest('dist/css'))
  });

  task('default', parallel('css', 'sass', 'less'));

压缩图片

  yarn add imagemin  --dev

  const imagemin = require('gulp-imagemin');

  task('image', function () {
  return src('resources/image/*.*')
        .pipe(imagemin({
          progressive: true
        }))
        .pipe(dest('dist/image'))
  });

  task('default', parallel('image'));