← older
gulp+webpack改
この記事の趣旨
前回作ったgulpfile+webpackをもっと使いやすくしたいねんけど…？
今回は
開発中はdevelopmentモードで圧縮せずに出力、納品時などにはproductionモードで圧縮したものを出力させます。
となるとね、webpack.config.jsに変数使いたいので今回はgulpfile.jsの中にwebpackの設定を入れ込んじゃおう！
はいドン！
// import
const browserSync = require('browser-sync');
const del = require('del');
const gulp = require('gulp');
const autoprefix = require('gulp-autoprefixer');
const cleanCss = require('gulp-clean-css');
const gulpif = require("gulp-if");
const pug = require('gulp-pug');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const minimist = require('minimist');
const path = require('path');
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
// var
const paths = {
dest: 'dest',
dev: 'htdocs',
src: {
all: 'src/**/*.*',
pug: ['src/**/*.pug', '!src/**/_*.pug'],
sass: ['src/**/*.scss', '!src/**/_*.scss'],
js: ['src/**/*.js', 'src/**/*.es6', 'src/**/_*.js', 'src/**/_*.es6'],
etc: ['src/**/*.*', '!src/**/*.pug', '!src/**/*.scss', '!src/**/*.js']
}
};
const targetBrowser = ['last 2 versions']; //'last 2 versions'
const options = minimist(process.argv.slice(2));
let mode = 'development';
if (options.production) {
mode = 'production';
}
let entry = ['index', 'test'];
let entryPoint = {
index: ['@babel/polyfill', './src/js/index.js']
};
for (let i = 0; i < entry.length; i++) {
const ele = entry[i];
if (!entryPoint[ele]) {
entryPoint[ele] = './src/js/' + ele + '.js';
}
}
let webpackConfig = {
mode: mode,
entry: entryPoint,
output: {
path: path.join(__dirname, paths.dest),
filename: "js/[name].min.js"
},
optimization: {
splitChunks: {
name: 'vendor',
chunks: 'initial',
}
},
module: {
rules: [{
test: /\.js$/,
exclude: '/node_modules/',
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}]
}]
},
performance: {
hints: false
}
};
function jsCompile() {
return webpackStream(webpackConfig, webpack)
.pipe(gulpif(options.production, gulp.dest(paths.dest), gulp.dest(paths.dev)))
}
function browsweSyncStart(cb) {
browserSync({
server: {
baseDir: './htdocs/',
index: 'index.html'
}
});
cb();
}
sass.compiler = require('sass');
function sassCompile(cb) {
gulp.src(paths.src.sass)
.pipe(sass())
.pipe(autoprefix({
browsers: targetBrowser
}))
.pipe(gulpif(options.production, cleanCss()))
.pipe(gulpif(options.production, rename({
suffix: '.min'
})))
.pipe(gulpif(options.production, gulp.dest(paths.dest), gulp.dest(paths.dev)));
cb();
}
function pugCompile(cb) {
gulp.src(paths.src.pug)
.pipe(pug({
pretty: true
}))
.pipe(gulpif(options.production, gulp.dest(paths.dest), gulp.dest(paths.dev)));
cb();
}
function etc(cb) {
gulp.src(paths.src.etc)
.pipe(gulpif(options.production, gulp.dest(paths.dest), gulp.dest(paths.dev)));
cb();
}
function browserReload(cb) {
browserSync.reload();
cb();
}
function clean() {
return del(paths.dest);
}
gulp.task('default',
gulp.series(jsCompile, gulp.parallel(pugCompile, sassCompile, etc), browsweSyncStart, function () {
gulp.watch(paths.src.sass, sassCompile);
gulp.watch(paths.src.js, jsCompile);
gulp.watch(paths.src.pug, pugCompile);
gulp.watch(paths.src.etc, etc);
gulp.watch(paths.dev, browserReload);
})
);
gulp.task('build',
gulp.series(clean, jsCompile, gulp.parallel(pugCompile, sassCompile, etc))
);gulpifとminimist
minimistというパッケージで、コマンドの引数を取れるようになります。
で、コマンドに--productionってついてたら圧縮、そうでなければ非圧縮という風にgulp-ifで分岐させてます。
なので、納品用にビルドするときはnpm run gulp build --productionを使うようにしました。
これに関してはpackage.jsonの方にスクリプトを書いておけばもっと短いコマンドでできますね。
エントリーポイント
エントリーポイントを自動取得したかったけどできず…。
その名残として、entryという配列入れた変数を残してます。
まぁ、いちいちwebpackの設定のところまでスクロールしなくても変更出来た方がいいよねってことで…。
出力先
同じくコマンドによって、gulp.destをgulp-ifで調整しています。
categories
tags
Update log
公開：2019/6/10＠20:57