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