Gulp:前端自动化构建工具

gulp安装

npm install gulp gulp-cli -D

新建配置文件

根目录下新建gulpfile.js文件

const gulp = require('gulp');
// var path = require('path');
const babel = require('gulp-babel'); //babel转码
var less = require('gulp-less'); //less
var sass = require('gulp-sass')(require('sass')); //sass
const eslint = require('gulp-eslint');
var browserify = require('gulp-browserify'); //browserify
var ts = require('gulp-typescript');


//babel转码;
gulp.task('babel', function () {
  return gulp
    .src('src/**/*.js')
    .pipe(
      babel({
        presets: ['@babel/env'],
      })
    )
    .pipe(gulp.dest('lib'));
});

//less编译
gulp.task('less', function () {
  return gulp.src('src/less/**/*.less').pipe(less()).pipe(gulp.dest('lib/css'));

//sass编译
gulp.task('sass', function () {
  return gulp.src('src/sass/**/*.scss').pipe(sass()).pipe(gulp.dest('lib/css'));
});

//eslint
gulp.task('eslint', () => {
  return gulp
    .src(['src/js/**/*.js'])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});

// Basic usage
gulp.task('build', function () {
  // Single entry point to browserify
  return gulp.src('lib/js/app.js').pipe(browserify()).pipe(gulp.dest('./dist'));
});

//文件监听
gulp.task('watch', function () {
  //sass监听
  gulp.watch('src/sass/**/*.scss', function () {
    return gulp
      .src('src/sass/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('lib/css'));
  });
  //less监听
  gulp.watch('src/less/**/*.less', function () {
    return gulp
      .src('src/less/**/*.less')
      .pipe(less())
      .pipe(gulp.dest('lib/css'));
  });
  //babel转译
  gulp.watch('src/js/**/*.js', function () {
    return gulp
      .src('src/js/**/*.js')
      .pipe(
        babel({
          presets: ['@babel/env'],
        })
      )
      .pipe(gulp.dest('lib/js'));
  });
  //监听整个src
  gulp.watch('lib/js/app.js', function () {
    return gulp
      .src('lib/js/app.js')
      .pipe(browserify())
      .pipe(gulp.dest('./dist'));
  });
    // TypeScript
  gulp.watch('src/js/ts/*.ts', function () {
    return gulp.src('src/js/ts/*.ts').pipe(ts()).pipe(gulp.dest('dist/js/'));
  });
});