gulp3打包项目的基本配置与分析

打包配置文件路径问题需根据自己命名的文件路径进行修改。
下面的每一项打包任务可以自行增删，根据自己的文件夹命名进行相关修改。

gulpfile.js文件：

var gulp = require('gulp');
// 其他的gulp插件统一用$来调用，不需要再一个一个require进去了
var $ = require('gulp-load-plugins')();
var open = require('open');

//定义全局目录
var app = {
    srcPath: 'src/',
    devPath: 'build/',  //打包后的原始数据存放处
    prdPath: 'dist/'    //打包后的压缩数据存放处
};

gulp.task('lib',function(){
    // 读取lib下面的库文件并移动打包
    gulp.src('lib/**/*.js')
    // 写入文件
    .pipe(gulp.dest(app.devPath + 'vendor'))
    .pipe(gulp.dest(app.prdPath + 'vendor'))
    // 配合watch实时刷新浏览器
    .pipe($.connect.reload());
});

gulp.task('html',function(){
    gulp.src(app.srcPath + '**/*.html')
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    // 配合watch实时刷新浏览器
    .pipe($.connect.reload());
});

gulp.task('json',function(){
    gulp.src(app.srcPath + 'data/**/*.json')
    .pipe(gulp.dest(app.devPath + 'data'))
    .pipe(gulp.dest(app.prdPath + 'data'))
    // 配合watch实时刷新浏览器
    .pipe($.connect.reload());
});

gulp.task('css', function() {
  // 读取css文件
    gulp.src(app.srcPath + 'css/**/*.css')
    .pipe($.plumber()) //防止编译出错时停止服务，而是直接给我们抛出错误
    .pipe(gulp.dest(app.devPath + 'css'))
    // 对编译后的文件进行压缩处理，然后写入到生产环境dist目录下
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + 'css'))
    // 配合watch实时刷新浏览器
    .pipe($.connect.reload());
});

gulp.task('less',function(){
    // 读取less文件
    gulp.src(app.srcPath + 'css/index.less')
    .pipe($.plumber()) //防止编译出错时停止服务，而是直接给我们抛出错误
    // 对less文件进行编译处理，然后写入build目录下
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + 'css'))
    // 对编译后的文件进行压缩处理，然后写入到生产环境dist目录下
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + 'css'))
    // 配合watch实时刷新浏览器
    .pipe($.connect.reload());
});
gulp.task('sass', function(){
  // 读取sass文件
  gulp.src(app.srcPath + 'css/**/*.scss')
  .pipe($.plumber()) //防止编译出错时停止服务，而是直接给我们抛出错误
  // 对sass文件进行编译处理，然后写入build目录下
  .pipe($.sass())
  .pipe(gulp.dest(app.devPath + 'css'))
  // 对编译后的文件进行压缩处理，然后写入到生产环境dist目录下
  .pipe($.cssmin())
  .pipe(gulp.dest(app.prdPath + 'css'))
  // 配合watch实时刷新浏览器
  .pipe($.connect.reload());
});
gulp.task('js',function(){
    gulp.src(app.srcPath + 'js/**/*.js')
    .pipe($.plumber()) //防止编译出错时停止服务，而是直接给我们抛出错误
    //将读取到的所有js文件打包成一个文件，然后写入build的js目录下
    .pipe($.concat('index.js'))
    .pipe(gulp.dest(app.devPath + 'js'))
    // 对编译后的文件进行压缩处理，然后写入到生dist的js目录下
    .pipe($.uglify())
    .pipe(gulp.dest(app.prdPath + 'js'))
    // 配合watch实时刷新浏览器
    .pipe($.connect.reload());
});

gulp.task('image',function(){
    gulp.src(app.srcPath + 'img/**/*')
    .pipe($.plumber()) //防止编译出错时停止服务，而是直接给我们抛出错误
    .pipe(gulp.dest(app.devPath + 'img'))
    // 对图片文件进行压缩处理，然后写入到生dist的img目录下
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath + 'img'))
    // 配合watch实时刷新浏览器
    .pipe($.connect.reload());
});

//删除生成的旧的目录文件
gulp.task('clean',function(){
    gulp.src([app.devPath , app.prdPath])
    .pipe($.clean())
});

// 总任务命令（这个命令会打包文件到本地bulid和dist目录下）
gulp.task('build',['lib','html','json','image','css','less', 'sass','js'])

//自动化构建项目，启动服务器
gulp.task('server',['build'], function() {
  $.connect.server({
    // 启动的根目录
    root: [app.devPath],
    // 保存修改后自动刷新（针对高级浏览器）
    livereload: true,
    // 端口号
    port: 8080,
    // 添加这个host配置，写上本地开发电脑的ip地址，那么在其他局域网上的所有设备都能访问了
    host:'192.168.1.222' // 假设我本地ip
  });
// 自启动项目
//  open('http://localhost:8080'); // 仅自己本地开发电脑能访问的项目地址
  open('http://192.168.1.222:8080'); // 开起局域网都能访问的项目地址
// 监控资源文件，实时刷新
  gulp.watch('lib/**/*', ['lib']);
  gulp.watch(app.srcPath + '**/*.html', ['html']);
  gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
  gulp.watch(app.srcPath + 'css/**/*.less', ['less']);
  gulp.watch(app.srcPath + 'css/**/*.scss', ['sass']);
  gulp.watch(app.srcPath + 'css/**/*.css', ['css']);
  gulp.watch(app.srcPath + 'js/**/*.js', ['js']);
  gulp.watch(app.srcPath + 'img/**/*', ['image']);
});

// 配置最后执行gulp时默认执行的命令
gulp.task('default', ['server']);

package.json文件：（依赖的一些包列表）

{
  "name": "angularjs_web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.2.0",
    "gulp-cssmin": "^0.2.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-less": "^3.4.0",
    "gulp-sass": "^3.1.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.2.0",
    "gulp-uglify": "^3.0.0",
    "open": "^0.0.5"
  }
}

gulp配置ES6：
https://www.jianshu.com/p/3a5c765092f3

gulp实战技巧之ES6模块化开发踩坑：
http://www.yilingsj.com/xwzj/2019-04-19/gulp-js-import.html
http://www.yilingsj.com/xwzj/2019-04-19/gulp-browserify-babelify.html
http://www.yilingsj.com/xwzj/2019-04-20/gulp-webpack-stream.html