今回は、webpack とgulp とBrowsersync を連携した環境を構築してみます。
まず、gulpでwebpackを読み込むために、「webpack-stream」をインストールします。 その他にもお好みで、「Node.js #023 – gulpとBrowsersyncでブラウザ同期 」や必要なモジュールをインストールしておきます。
npm install -D webpack webpack-stream gulp
今回は、下記のようなディレクトリ構造にします。
それぞれのコードを記述します。
webpack.config.js var webpack = require ('webpack' );module .exports = { entry: './_resouce/main.js' , output: { path: __dirname + '/dist/js' , filename: 'script.js' }, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] };
gulpfile.js var webpackStream = require ("webpack-stream" );var webpack = require ("webpack" );var webpackConfig = require ("./webpack.config" );var gulp = require ('gulp' );var watch = require ('gulp-watch' );var plumber = require ('gulp-plumber' );var notify = require ('gulp-notify' );var htmlmin = require ('gulp-html-minifier' );var cssmin = require ('gulp-minify-css' );var rename = require ('gulp-rename' );var browserSync = require ("browser-sync" ).create();var reload = browserSync.reload;gulp.task('BrowserSyncOn' , function ( ) { browserSync.init({ server: { baseDir: './dist' } }); gulp.watch("./_resouce/**/*" ).on("change" , reload); }); gulp.task('html-min' , function ( ) { return gulp.src('./_resouce/*.html' ) .pipe(htmlmin({collapseWhitespace : true ,removeComments : true })) .pipe(gulp.dest('./dist' )); console .log('HTMLを圧縮' ); }); gulp.task('css-min' , function ( ) { return gulp.src('./_resouce/css/*.css' ) .pipe(cssmin()) .pipe(gulp.dest('./dist/css' )); console .log('CSSを圧縮' ); }); gulp.task("js-min" , function ( ) { return webpackStream(webpackConfig, webpack) .pipe(gulp.dest("./dist/js" )); console .log('JSをコンパイルして圧縮' ); }); gulp.task('watch' , function ( ) { gulp.watch([ './_resouce/**/*' ],[ 'html-min' , 'css-min' , 'js-min' ]); console .log('更新完了!!' ); }); gulp.task('default' , ['BrowserSyncOn' ,'watch' ])
package.json { "name" : "004" , "version" : "1.0.0" , "description" : "" , "main" : "main.js" , "scripts" : { "build" : "webpack" }, "keywords" : [], "author" : "" , "license" : "ISC" , "devDependencies" : { "browser-sync" : "^2.13.0" , "gulp" : "^3.9.1" , "gulp-html-minifier" : "^0.1.8" , "gulp-minify-css" : "^1.2.4" , "gulp-minify-html" : "^1.0.6" , "gulp-notify" : "^2.2.0" , "gulp-plumber" : "^1.1.0" , "gulp-rename" : "^1.2.2" , "gulp-watch" : "^4.3.8" , "webpack" : "^3.5.4" , "webpack-stream" : "^4.0.0" }
main.js import {sample01} from "./js/sample01.js" ;import {sample02} from "./js/sample02.js" ;sample01(); sample02();
index.html <!DOCTYPE html> <html lang ="ja" > <head > <meta charset ="UTF-8" > <title > webpack gulp Sample</title > <link href ="./css/stylesheet.css" rel ="stylesheet" /> </head > <body > <h1 > webpack and gulp !!</h1 > <script src ="./js/script.js" > </script > </body > </html >
stylesheet.css
sample01.js export function sample01 ( ) { console .log('sample01を実行!!' ); }
sample02.js export function sample02 ( ) { console .log('sample02を実行!!' ); }
gulpを実行します。編集後保存すると、圧縮されたHTML・CSSとコンパイルされたJSがそれぞれ生成されます。
gulpfile.js gulpでwebpackを読み込む:
var webpackStream = require ("webpack-stream" );var webpack = require ("webpack" );var webpackConfig = require ("./webpack.config" )
gulpfile.js gulpでコンパイル処理:
gulp.task("js-min" , function ( ) { return webpackStream(webpackConfig, webpack) .pipe(gulp.dest("./dist/js" )); console .log('JSをコンパイルして圧縮' ); })
webpackとgulpとBrowsersyncを利用した開発環境を構築してみました。