前端速学成财:第十课-混合篇:webpack和gulp"勾结"初步

1.gulp插件(这是一个可以无比方便的关联gulp和webpack的插件)
npm install gulp-webpack --save-dev

2.我们设定一个需求
1、首先使用CommonJS规范编写代码
2、利用webpack编译JS文件
3、编译好后用gulp压缩
注意:需要一次性完成,而不是敲两次命令

gulpfile.js

var gp = require("gulp");
var gulp_concat = require("gulp-concat");
var gulp_uglify = require("gulp-uglify");

var gulp_webpack=require("gulp-webpack");

gp.task("mytask", function () {
    gp.src(['sxin.js'])
        .pipe(gulp_webpack())
        .pipe(gulp_uglify())
        .pipe(gp.dest('./build/js'));
    gp.src(['*.css'])
        .pipe(gulp_concat("main.css"))
        .pipe(gp.dest('./build/css'));
});

gulp mytask

运行后发现，生成的文件名是随机的.
然后我们可以发现
1、没有加载webpack配置文件
2、同事并没有调用我们上节课独立安装的webpack(请注意,gulp-webpack插件中有个webpack)
事实上,项目开发中我们肯定是需要调用我们自己”独立”安装的webpack(版本可控)

手动传入webpack配置:

var gp = require("gulp");
var gulp_concat = require("gulp-concat");
var gulp_uglify = require("gulp-uglify");

var gulp_webpack=require("gulp-webpack");
var webpack_config=require("./webpack.config");

gp.task("mytask", function () {
    gp.src(['sxin.js'])
        .pipe(gulp_webpack(webpack_config))
        .pipe(gulp_uglify())
        .pipe(gp.dest('./build/js'));
    gp.src(['*.css'])
        .pipe(gulp_concat("main.css"))
        .pipe(gp.dest('./build/css'));
});

使用我们独立安装的webpack:
npm install -g webpack
npm install webpack --save-dev

var gp = require("gulp");
var gulp_concat = require("gulp-concat");
var gulp_uglify = require("gulp-uglify");

var gulp_webpack=require("gulp-webpack");
var webpack_config=require("./webpack.config");

var webpack=require("webpack");

gp.task("mytask", function () {
    gp.src(['sxin.js'])
        .pipe(gulp_webpack(webpack_config,webpack))
        .pipe(gulp_uglify())
        .pipe(gp.dest('./build/js'));
    gp.src(['*.css'])
        .pipe(gulp_concat("main.css"))
        .pipe(gp.dest('./build/css'));
});