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