gulp + webpackを使ってみる ― http://kihara.coresv.com/2019/03/07/237/I log.

gulp + webpackを使ってみる

この記事の趣旨

前回作ったgulpfileにwebpackをプラスして、import/exportができるjsにする。

ちなみに前回つくったgulpfile

src内でファイル削除をした際にdest内の関連ファイルを削除する方のやつ。

// import
var browserSync = require('browser-sync');
var del = require('del');
var gulp = require('gulp');
var autoprefix = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var cleanCss = require('gulp-clean-css');
var pug = require('gulp-pug');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');

// var
var paths = {
  dest: 'dest',
  src: {
    all: 'src/**/*.*',
    pug: ['src/**/*.pug', '!src/**/_*.pug'],
    sass: ['src/**/*.scss', '!src/**/_*.scss'],
    es6: 'src/**/*.es6',
    etc: ['src/**/*.*', '!src/**/*.pug', '!src/**/*.scss', '!src/**/*.es6']
  }
};
var targetBrowser = ['last 2 versions'];

// functions
function browsweSyncStart(){
  browserSync({
    server: {
      baseDir: './dest/',
      index: 'index.html'
    }
  });
}

sass.compiler = require('sass');
function sassCompile(cb){
  gulp.src(paths.src.sass)
    .pipe(sass())
    .pipe(autoprefix({ browsers: targetBrowser }))
    .pipe(cleanCss())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.dest));
  cb();
}

function babelCompile(cb){
  gulp.src(paths.src.es6)
    .pipe(babel({ presets: ['@babel/env'] }))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.dest));
  cb();
}

function pugCompile(cb){
  gulp.src(paths.src.pug)
    .pipe(pug())
    .pipe(gulp.dest(paths.dest));
  cb();
}

function etc(cb){
  gulp.src(paths.src.etc)
    .pipe(gulp.dest(paths.dest));
  cb();
}

function browserReload(cb){
  browserSync.reload();
  cb();
}

//watch
gulp.watch(paths.src.sass, {events: ['add','change']}, sassCompile);
gulp.watch(paths.src.es6, {events: ['add','change']}, babelCompile);
gulp.watch(paths.src.pug, {events: ['add','change']}, pugCompile);
gulp.watch(paths.src.etc, {events: ['add','change']}, etc);
gulp.watch(paths.dest, {events: ['add','change']}, browserReload);
gulp.watch(paths.src.all).on('unlink', function(path, stats){
  var pathNum = path.indexOf('.');
  path = path.substring(3, pathNum);
  var delFile = 'dest'+path+'.*';
  if(delFile.length){
    return del(delFile);
  }
});

// export
exports.default = gulp.series(
  pugCompile,
  sassCompile,
  babelCompile,
  etc,
  browsweSyncStart
);

現在、コンパイルには支障ないが、nodeモジュールとしてインストールしたjsプラグインを利用することはできない。

…ですよね?

ではさっそく

webpack導入していきます。

参考:Gulpで始めるwebpack 4入門

npm i -D webpack webpack-stream

gulpfile.js

// import
var browserSync = require('browser-sync');
var del = require('del');
var gulp = require('gulp');
var autoprefix = require('gulp-autoprefixer');
var cleanCss = require('gulp-clean-css');
var pug = require('gulp-pug');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var webpackStream = require('webpack-stream');
var webpack = require('webpack');

// var
var webpackConfig = require('./webpack.config');

var paths = {
  dest: 'dest',
  src: {
    all: 'src/**/*.*',
    pug: ['src/**/*.pug', '!src/**/_*.pug'],
    sass: ['src/**/*.scss', '!src/**/_*.scss'],
    es6: 'src/**/*.js',
    etc: ['src/**/*.*', '!src/**/*.pug', '!src/**/*.scss', '!src/**/*.js']
  }
};
var targetBrowser = ['last 2 versions'];

// functions
function browsweSyncStart(){
  browserSync({
    server: {
      baseDir: './dest/',
      index: 'index.html'
    }
  });
}

sass.compiler = require('sass');
function sassCompile(cb){
  gulp.src(paths.src.sass)
    .pipe(sass())
    .pipe(autoprefix({ browsers: targetBrowser }))
    .pipe(cleanCss())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.dest));
  cb();
}

function babelCompile(cb){
  return webpackStream(webpackConfig, webpack)
    .pipe(gulp.dest(paths.dest));
}

function pugCompile(cb){
  gulp.src(paths.src.pug)
    .pipe(pug())
    .pipe(gulp.dest(paths.dest));
  cb();
}

function etc(cb){
  gulp.src(paths.src.etc)
    .pipe(gulp.dest(paths.dest));
  cb();
}

function browserReload(cb){
  browserSync.reload();
  cb();
}

//watch
gulp.watch(paths.src.sass, {events: ['add','change']}, sassCompile);
gulp.watch(paths.src.es6, {events: ['add','change']}, babelCompile);
gulp.watch(paths.src.pug, {events: ['add','change']}, pugCompile);
gulp.watch(paths.src.etc, {events: ['add','change']}, etc);
gulp.watch(paths.dest, {events: ['add','change']}, browserReload);
gulp.watch(paths.src.all).on('unlink', function(path, stats){
  var pathNum = path.indexOf('.');
  path = path.substring(3, pathNum);
  var delFile = 'dest'+path+'.*';
  if(delFile.length){
    return del(delFile);
  }
});

function clean(){
  return del(paths.dest);
}
// export
exports.default = gulp.series(
  pugCompile,
  sassCompile,
  babelCompile,
  etc,
  browsweSyncStart
);

exports.build = gulp.series(
  clean,
  pugCompile,
  sassCompile,
  babelCompile,
  etc,
  browsweSyncStart
);

webpack.config.js

module.exports = {
  mode: "production",
  entry: "./src/js/index.js",
  output: {
    path: `${__dirname}/js`,
    filename: "script.js"
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }]
    }]
  }
}

jsのコンパイル時に使っていたgulp-babelとgulp-uglifyが必要なくなりました。

これでimportを使った開発ができます!

ついでに、削除問題に関しては、基本的に削除されたファイルに対応するものを削除としていましたが、buildタスクを実行した際には全削除ということにしました。

なんだこの警告

インポートしたファイルが重くてファイルが250KBを超えると、webpack側で警告が出ます。

お前、一つのファイルにまとめるんやないのか! そらでかくなるやろ! なんやねん!

で、出てくるのがチャンクという考え方。

参考:webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜

まあ、共通してるものは別のファイルにしたらいいよねってこと。複数ページあって、その個別のページのjsが全然違う内容のときとかに効力を発揮する。

webpack.config.js

const path = require('path');
module.exports = {
  mode: "production",
  entry: {
    index: './src/js/index.js',
    index2: './src/js/index2.js'
  },
  output: {
    path: path.join(__dirname, '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
  }
}

entoryは案件ごとに変えないといけない。

あとpreformanceで250KB超えたときの警告を無視することにした。jqueryとか入れたら絶対越えるし。超えるのはわかっとんねん。ちな、max値を変える設定は効かなかった。

あとoutputのパスについては、相対パスではエラーが出たため、pathというモジュールを追加して絶対パスで指定しています。参考サイトでもしれっとpathで指定されている。


categories

脱コピペ

Update log

公開:2019/3/7@9:42