node.js_016_02

node.js_023_01


今回は、webpackgulpBrowsersyncを連携した環境を構築してみます。


まず、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


h1 {
color: #5FC4B6;
}


sample01.js


export function sample01() {
console.log('sample01を実行!!');
}


sample02.js


export function sample02() {
console.log('sample02を実行!!');
}


gulpを実行します。編集後保存すると、圧縮されたHTML・CSSとコンパイルされたJSがそれぞれ生成されます。


gulp


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を利用した開発環境を構築してみました。