gulp构建自动化工具

首先确保gulp是全局变量

npm install -g gulp

安装完之后 gulp -v 查看版本

gulp -v

首先安装 gulp

yarn add gulp 

最重要的，版本安装不对，不能转化和生成文件

es6->es5

yarn add gulp-babel@7.0.1  babel-core  babel-preset-es2015

本地服务

yarn add gulp-connect

压缩、混淆

yarn add gulp-uglify

重命名

yarn add gulp-rename

新建 .babelrc 文件 输入

{
  "presets": ["es2015"]
}

新建gulpfile.js 文件

var gulp = require('gulp');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var connect = require('gulp-connect');

//定义方法
gulp.task('jss', function () {
    gulp.src('src/index.js')
        .pipe(babel({
            presets: ['es2015'] //es6 -> es5
        }))
        .pipe(rename({suffix: '.min'}))//重命名
        .pipe(uglify({ //压缩混淆
            mangle: true,//类型：Boolean 默认：true 是否修改变量名
            compress: true,//类型：Boolean 默认：true 是否完全压缩
        }))
        .pipe(gulp.dest('dist'));//输出文件
});

//配置热更新服务器
gulp.task("server", function(){
	connect.server({
		livereload: true,
		port: 8030
	})
})

//监听
gulp.task('watch', function () {
    gulp.watch('src/index.js', ['jss']);
});

//自动刷新
gulp.task("reload", function(){
	gulp.src("/*.html")
		.pipe(connect.reload());
})
//默认执行的任务
gulp.task('default', ['watch', 'jss', 'server']);

详细内容请看： https://www.gulpjs.com.cn/docs/api/