gulp webpack 组合 打包
在gulp的环境里调用webpack3(当前是3.5.6)这里nodejs环境是v8.1.0;npm是5.0.3，在这里我让webpack主要负责把js统一打包成模块并且es6转es5，兼容ie8浏览器。
这里来看一下重要的配置文件：
//package.json
{
"name": "gulp_es6",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"gulp": "gulp"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer-core": "^6.0.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"babel-preset-env": "^2.0.0-beta.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"del": "^3.0.0",
"expose-loader": "^0.7.3",
"file-loader": "^0.11.2",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.0",
"gulp-base64": "^0.1.3",
"gulp-cheerio": "^0.6.2",
"gulp-concat": "^2.6.1",
"gulp-file-include": "^1.2.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.3.0",
"gulp-make-css-url-version": "0.0.13",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^3.0.0",
"gulp-postcss": "^7.0.0",
"gulp-rename": "^1.2.2",
"gulp-rev-append": "^0.1.8",
"gulp-uglify": "^3.0.0",
"gulp-useref": "^3.1.2",
"jquery": "^1.11.0",
"style-loader": "^0.18.2",
"uglifyjs-webpack-plugin": "^1.0.0-rc.0",
"vue": "^2.4.4",
"webpack-stream": "^4.0.0"
},
"dependencies": {
"vinyl-named": "^1.1.0"
}
}
*注意：解压后修改为 “gulp”: “node ./node_modules/gulp/bin/gulp”
//gulpfile.js
var gulp = require('gulp');
var cssmin = require('gulp-minify-css'); //压缩，删除注释、换行，合并选择器
var cssver = require('gulp-make-css-url-version'); //为css的url背景图片添加mdb5,防止缓存
var concat = require('gulp-concat');//合并css、js
var uglify = require('gulp-uglify'); //js压缩
var notify = require('gulp-notify'); //任务执行成功提示
var htmlmin = require('gulp-htmlmin');//对html页面压缩处理
var postcss = require('gulp-postcss'); //自动添加css前缀
var autoprefixer = require('autoprefixer-core');//自动添加css前缀
var rev = require('gulp-rev-append'); //为html的js、css添加版本号
var cheerio = require('gulp-cheerio'); //操作html的dom，目的合并多个js或者css链接
var useref = require('gulp-useref'); //将html中多个link和script各自合并成一个
var del = require('del'); //删除文件
var gulpif = require('gulp-if');
var imageMin = require('gulp-imagemin'); //图片压缩
var babel = require("gulp-babel");
var fileinclude = require('gulp-file-include');
var base64 = require('gulp-base64'); //将css里面的小图片转化为base64
var webpack = require('webpack-stream');
var webpack2 = require('./node_modules/webpack');
var rename = require("gulp-rename");
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var named = require('vinyl-named');
gulp.task('fileinclude', function() {
// 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
gulp.src(['src/**/*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'))
.on('end', function () {
gulp.src('src/*.html')
.pipe(useref())
//.pipe(gulpif('*.js', babel())) //转化es6为es5,但是ie8用不了，ie9可以
// .pipe(gulpif('*.js', uglify({
// mangle:false,//类型：Boolean 默认：true 是否修改变量名
// compress:false,//类型：Boolean 默认：true 是否完全压缩
// // preserveComments:'all'//保留所有注释
// })))
.pipe(gulpif('*.css', cssmin({
advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
})))
.pipe(gulpif('*.css',postcss([ autoprefixer({ browsers: ["> 0%"] }) ])))
.pipe(gulpif('*.css',cssver()))
.pipe( gulpif('*.css',base64({
// baseDir: 'public',
// extensions: ['svg', 'png', /\.jpg#datauri$/i],
// exclude: [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
maxImageSize: 5*1024 // 小于5KB的图片就会被转化为base64
// debug: true
})))
.pipe(gulpif('*.html',htmlmin({
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
})))
.pipe(gulpif('*.html',rev()))
//.pipe(gulpif('*.html',cheerio(function ($, file) {
// $('link').eq(0).remove();
// $('head').append('<link rel="stylesheet" href="css/css.min.css?rev='+Math.random()+'">');
// $('script').eq(0).remove();
// $('head').append('<script src="js/all.min.js?rev='+Math.random()+'"></script>');
//})))
.pipe(gulp.dest('dist'))
});
});
//把独立的js复制到dist/js的根目录下
gulp.task('copy', function() {
gulp.src('src/js/*.*')
.pipe(gulp.dest('dist/js'))
});
//图片压缩
gulp.task('img', function () {
gulp.src('src/images/*.*')
.pipe(imageMin({progressive: true}))
.pipe(gulp.dest('dist/images'));
});
//为此任务命名为watch
// gulp.task('watch',function(){
// gulp.watch('src/**/*.css',['sync']); //在css目录下的所有文件夹的后缀是css的文件，一旦修改就自动执行testCssmin任务
// gulp.watch('src/**/*.js',['sync']);
// });
//监听 src目录下的css 和 js 还有view目录下的html一旦有变化就更新
gulp.task('watch',function(){
gulp.watch(['src/**/*.css','src/**/*.js','src/**/*.html'],function () {
gulp.src(['view/**/*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('src'))
.on('end', function () {
gulp.src('src/*.html')
.pipe(useref())
// .pipe(gulpif('*.js', uglify({
// mangle:false,//类型：Boolean 默认：true 是否修改变量名
// compress:false,//类型：Boolean 默认：true 是否完全压缩
// // preserveComments:'all'//保留所有注释
// })))
.pipe(gulpif('*.css', cssmin({
advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
})))
.pipe(gulpif('*.css',postcss([ autoprefixer({ browsers: ["> 0%"] }) ])))
.pipe(gulpif('*.css',cssver()))
.pipe( gulpif('*.css',base64({
maxImageSize: 5*1024 // 小于5KB的图片就会被转化为base64
})))
.pipe(gulpif('*.html',htmlmin({
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
})))
.pipe(gulpif('*.html',rev()))
.pipe(gulp.dest('dist'))
});
});
});
//修改view目录下的html就自动在src根目录下生成html
// gulp.task('watch_html',function(){
// gulp.watch('src/**/*.html',['fileinclude']); //在css目录下的所有文件夹的后缀是css的文件，一旦修改就自动执行testCssmin任务
// });
//gulp的默认执行的任务就是watch任务
//gulp.task('default',['testCssmin','js','html','watch'], function() {
// // 将你的默认的任务代码放在这
//});
gulp.task('default',['fileinclude','img','copy','watch'], function() {
// 将你的默认的任务代码放在这
return gulp.src(['src/js/a.js','src/js/b.js','src/js/css.js'])
.pipe(named()) //可以将多个js ['src/js/a.js','src/js/b.js','src/js/css.js'] 分开打包
.pipe(webpack({
watch: true,
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'file-loader',query: {name: 'images/[name].[ext]'} },
{
test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
exclude: /node_modules/,
loader: "babel-loader"
},
],
},
plugins: [ //扩展webpack额外的功能，要使用webpack自带插件就引入webpack，其他功能的话就额外安装其他插件
new webpack2.BannerPlugin('这个插件功能是头部提示功能'),
// new UglifyJSPlugin({uglifyOptions:{
// ie8: true
// }})
// new webpack2.ProvidePlugin({ //使用sudo npm install jquery@1.11.0，来调用jq,并将jq暴露打包文件全局中，相当于给window加了jquery
// $:"jquery",
// jQuery:"jquery",
// "window.jQuery":"jquery",
// 'window.$': 'jquery'
// }),
]
}))
// .pipe(rename("webpack_2.js"))
.pipe(gulp.dest('dist/js')); // ./dist/js/webpack_.js
});
为了以后方便使用，可以直接下在：下载地址
百度地址：https://pan.baidu.com/s/1slJoTvZ
使用步骤：（此包在mac下测试通过）
1，下载解压后不需要npm install，全部依赖包已经在里面了，
修改package.json，修改内容为”gulp”: “node ./node_modules/gulp/bin/gulp”，并让整个目录有执行权限chmod -R 777 /xxx/xxx
2，直接在shell命令里面执行npm run gulp即可
3，(1)编辑html，切换到目录./src中
(2)编辑css、js和添加图片，切换到目录./src中
4，浏览查看未编译的页面就浏览./src里面的html
浏览已经编译好的页面查看./dist里面的html
———————-babel一些坑——————————-
babel并不能把所有的es6功能都能完美转换为es5；
babel转化过的js压缩后ie8有问题
下次本人测试可以使用
//class方法声明 面向对象
//箭头函数
//模板
//默认参数
————————————————————————————————————–
gulp负责：
html压缩、css和js的链接分别合并、css代码压缩
webpack负责(主要处理js)：
将es6转化成es5，js压缩、合并(合并后ie8不兼容)
推荐：
如果坚持使用es6转es5的功能，就不能压缩否则ie8无法工作，除非不考虑兼容ie8。
不是有特殊需求放弃使用webpack，js的压缩合并都是用gulp来处理。
需要合并链接，并将多个js打包压缩在一起就把js统一放在./src/js/public/里面，链接最前面最先被加载
<!-- build:js js/public/public.min.js --> <script src="./js/public/jquery.js"></script> <script src="./js/public/a.js"></script> <!-- endbuild -->
打包后成为
<script src="js/public/public.min.js"></script>
需要合并链接，并将多个css打包压缩在一起就把css统一放在./src/css/里面，链接最前面最先被加载,效果跟js一样