自动化构建工具之----gulp.js

项目下使用gulp进行自动化构建

本地安装gulp

npm i gulp --save-dev
#或者
npm i gulp -D

检查是否安装成功：

gulp --version

创建gulpfile.js文件

在项目根目录下创建gulpfile.js

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');
 
var paths = {
  styles: {
    src: 'src/styles/**/*.less',//原目录
    dest: 'assets/styles/'  //压缩后保存路径
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  }
};
 
/* Not all tasks need to use streams, a gulpfile is just another node program
 * and you can use all packages available on npm, but it must return either a
 * Promise, a Stream or take a callback and call it
 */
function clean() {
  // You can use multiple globbing patterns as you would with `gulp.src`,
  // for example if you are using del 2.0 or above, return its promise
  return del([ 'assets' ]);
}
 
/*
 * Define our tasks using plain functions
 */
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}
 
function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}
 
function watch() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}
 
/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp.series(clean, gulp.parallel(styles, scripts));
 
/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;
exports.build = build;
/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports.default = build;

测试

在项目根目录下执行 gulp 命令：

gulp

gulp-uglify 插件

压缩js代码

安装：

npm i gulp-uglify -D

在gulpfile.js中配置

gulp-babel 插件

实现es6代码转译

npm install --save-dev gulp-babel@7 babel-core babel-preset-env 

在gulpfile.js配置

const babel=require('gulp-babel')
const scripts=

gulp-clean-css

压缩css

npm i gulp-clean-css -D

gulp-sass

实现sass文件编译

npm i node-sass gulp-sass@4 -D

在vscode用默认浏览器打开html文件，地址栏是file协议，有些功能受限，比如cookie

gulp-htmlmin

压缩html

npm install --save gulp-htmlmin