Convert Gulp task into webpack - angularjs

Question

Main tasks:
concatecate js files "in order" and minify it
the minify should not break angular js modules
the output js filename should come with md5 string to prevent browser's cache. eg. bundle-24141asd.js
the generated js bundle-24141asd.js will update to the index.html
JS
'use strict';
var concatFile = require('gulp-concat'),
gulp = require('gulp'),
minifyCss = require('gulp-minify-css'),
concat = require('gulp-concat'),
shell = require('gulp-shell'),
amdOptimize = require('amd-optimize'),
print = require('gulp-print'),
usemin = require('gulp-usemin'),
uncache = require('gulp-uncache'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
rename = require("gulp-rename"),
sourcemaps = require('gulp-sourcemaps'),
ngAnnotate = require('gulp-ng-annotate'),
clean = require('gulp-clean'),
revDel = require('rev-del'),
gutil = require('gulp-util'),
wait = require('gulp-wait'),
runSequence = require('run-sequence'),
fs = require('fs'),
var css_assets = [
"./css/*.css",
];
var general_js_assets = [];
var ng_js_list = [
"js/jquery-1.11.2.min.js",
"js/common_scripts_min.js",
"assets/validate.js",
".//bower_components/angular/angular.min.js",
".//bower_components/angular-messages/angular-messages.min.js",
".//bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"
]
gulp.task('process_ng_js', function() { //- 创建一个名为 concat 的 task
var stream = gulp.src(ng_js_list) //- 需要处理的css文件，放到一个字符串数组里
// .pipe(ngAnnotate())
// .pipe(uglify())
.pipe(sourcemaps.init())
.pipe(concat('ng_required.min.js')) //- 合并后的文件名
.pipe(rev()) //- 文件名加MD5后缀
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dist/js')) //- 输出文件本地
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(rename({
prefix: "ng-js-",
}))
.pipe(gulp.dest('./dist'));
return stream;
});
gulp.task('concat_css', function() { //- 创建一个名为 concat 的 task
var stream = gulp.src(css_assets) //- 需要处理的css文件，放到一个字符串数组里
.pipe(concat('app.min.css')) //- 合并/**后的文件名
.pipe(minifyCss({options: {
// processImport: false
}})) //- 压缩处理成一行
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('./dist/css')) //- 输出文件本地
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(rename({
prefix: "css-",
}))
.pipe(gulp.dest('./dist')); //- 将 rev-manifest.json 保存到 rev 目录内
return stream;
});
gulp.task('clean', function () {
var stream = gulp.src(['./dist/js/*.js', './dist/js/*.js.map', './dist/js/required_lib*'], {read: false})
var stream = gulp.src(['./dist/js/app*.js',
'./dist/js/app*.js.map',
// './dist/css/**/*'
],
{read: false})
.pipe(clean({force: true}));
return stream;
});
gulp.task('update_revision', function() {
gulp
.src(['./dist/*.json', './portal/index_tpl.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector({replaceReved: true})) //- 执行文件内名的替换
.pipe(rename({
basename: "index",
extname: ".html"
}))
.pipe(gulp.dest('./portal')); //- 替换后的文件输出的目录
});
gulp.task('revision_portal_page', function() {
gulp
.src(['./dist/*.json', './index.tmpl.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector({replaceReved: true})) //- 执行文件内名的替换
.pipe(rename({
basename: "index",
extname: ".html"
}))
.pipe(gulp.dest('./')); //- 替换后的文件输出的目录
});
gulp.task('default', function(callback) {
return runSequence(
'clean',
[
'process_ng_js',
'process_ng_app'
],
// ['process_ng_js','process_ng_app'],
['concat_css'],
'update_revision',
'revision_portal_page',
callback
);
});
var js_watcher = gulp.watch(['./app/main/*.js', './app/index**.js']
, ['default']);
js_watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
var css_watch = gulp.watch(['.//css/style.css']
, ['default']);
css_watch.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
var html_watcher = gulp.watch(['index.tmpl.html',
'tour_package.html',
],
['default']); html_watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
Webpack (TO BE DONE)
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'./index.js'
],
output: {
path: __dirname,
filename: 'bundle.js' // <- could I make it with MD5 string(to invalidate brwoser cache) and update it into index.html ?
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
};

Answer 1

You need to add the [hash] option that webpack provide in your output file, hence this will enable long-term caching.
{
output: {
path: __dirname,
filename: "bundle-[hash].js",
}
}

Answer 2

webpack already bundles your files, which means concatenates. in addition, it adds the hash to the bundled files, if you set the output part as :
output: {
path: __dirname,
filename: 'bundle-[chunkhash].js'
}
for minify and mangle operations you can use webpack plugins. for example for this, you can below :
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
minimize: true,
mangle: {except: ["myModule1", "myModule2"]}
in order it not to break your modules, you can add them into mangle.except array as above.
Extra information, if you want to have manifest file which maps bundle file names to hashed bundle file names in case of further usage, you can add :
new Manifest({
fileName: "bundles" + ".manifest.json"
})
but you need to install it via npm.