Windows gulp環境構築メモ

ざっくり初期設定

・rubyインストール

・node.jsインストール

・npm install -g gulp -> グローバルにgulpインストール

・workディレクトリ移動

・npm init -> package.json作成

あとはpackage.jsonとgulpfile.js置いたり編集したりして

npm install

gulp

でオッケー

rubyもnodeもインストーラでインストールして、最初はパスも通ってたのに再起動したら環境変数が消えてハマった。

手作業で設定しなおすはめに・・・

ユーザ環境変数

NODE_PATH : node.exeがあるディレクトリを指定

システム環境変数のPath

・node.exeがあるディレクトリ

・rubyインストールしたディレクトリ¥bin

・ユーザ¥ユーザ名¥AppData¥Roaming¥npm

設定ファイルは最終的にこんな感じ

package.json

{
	"name": "chorolling",
	"version": "1.0.0",
	"description": "chorolling",
	"dependencies": {},
	"devDependencies": {
		"babel-loader": "^6.2.5",
		"babel-preset-es2015": "^6.13.2",
		"babel-preset-es2015-loose": "^7.0.0",
		"babel-preset-react": "^6.11.1",
		"gulp": "^3.9.1",
		"gulp-autoprefixer": "^3.1.1",
		"gulp-notify": "^2.2.0",
		"gulp-plumber": "^1.1.0",
		"gulp-pug": "^3.0.4",
		"gulp-stylus": "^2.5.0",
		"gulp-watch": "^4.3.9",
		"gulp-webpack": "^1.5.0"
	}
}

gulpfile.js

var conf = require('./config.js');
var gulp = require('gulp');
var watch = require('gulp-watch');
var pug = require('gulp-pug');
var stylus = require('gulp-stylus');
var nib = require('nib');
var autoprefixer = require('gulp-autoprefixer');
var webpack = require('gulp-webpack');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var fs = require('fs');
var path = require('path');


// ----------------------------------------- PUG
gulp.task('pug', () => {
	gulp.src([
		conf.path.src+'[^_]*.pug',
		conf.path.src+'[^_]**/[^_]*.pug',
		conf.path.src+'[^_]**/[^_]**/[^_]*.pug',
		conf.path.src+'[^_]**/[^_]**/[^_]**/[^_]*.pug'
	])
	.pipe(plumber({
	errorrrorHandler: notify.onError("Error: <%= error.message %>")
	}))
	.pipe(pug({
		pretty: true
	}))
	.pipe(gulp.dest(conf.path.dest))
	.pipe(notify('Complete: <%= file.relative %>'))
});

// ----------------------------------------- STYLUS
gulp.task('stylus', () => {
	gulp.src([
		conf.path.src+'[^_]*.styl',
		conf.path.src+'[^_]**/[^_]*.styl',
		conf.path.src+'[^_]**/[^_]**/[^_]*.styl',
		conf.path.src+'[^_]**/[^_]**/[^_]**/[^_]*.styl'
	])
	.pipe(plumber({
		errorHandler: notify.onError("Error: <%= error.message %>")
	}))
	.pipe(stylus({
		use: [nib()],
		compress: true,
		linenos: false
	}))
	.pipe(autoprefixer({
		browsers: [
			'last 2 versions',
			'ie >= 9',
			'iOS >= 7',
			'Android >= 2'
		],
		cascade: false
	}))
	.pipe(gulp.dest(conf.path.dest))
	.pipe(notify('Complete: <%= file.relative %>'))
});

// ----------------------------------------- WEBPACK

(() => {
	var webpack_conf = {
		cache: true,
		entry: {},
		output: {
			'filename': '[name]'
		},
		resolve: {
			extensions: ['', '.js'],
		root: [
			path.resolve(conf.path.src + '**/js/class/'),
		],
		modulesDirectories: ['node_modules'],
			alias: {
				'node': path.resolve('node_modules/')
			}
		},
		module: {
			loaders: [{
				test: /.js$/,
				exclude: /(node_modules|bower_components)/,
				loader: path.resolve('node_modules/babel-loader'),
				query:{
					presets: [path.resolve('node_modules/babel-preset-react'), 
					path.resolve('node_modules/babel-preset-es2015'), 
					path.resolve('node_modules/babel-preset-es2015-loose')]
				}
			}]
		}
	};

	setEntryPoint(conf.path.src, webpack_conf['entry'], conf.path.src);

	gulp.task('webpack', function() {
		gulp.src([
			conf.path.src+'[^_]*.js',
			conf.path.src+'[^_]**/[^_]*.js',
			conf.path.src+'[^_]**/[^_]**/[^_]*.js',
			conf.path.src+'[^_]**/[^_]**/[^_]**/[^_]*.js'
		])
		.pipe(plumber({
			errorHandler: notify.onError("Error: <%= error.message %>")
		}))
		.pipe(webpack(webpack_conf))
		.pipe(gulp.dest(conf.path.dest))
		.pipe(notify('Complete: <%= file.relative %>'))
	});
})();

function setEntryPoint(_path, _arr, _work) {
	fs.readdir(_path, function(e, f) {
		if (e) {
			throw e;
		}
		for (var key in f) {
			if (fs.statSync(_path + f[key]).isDirectory() && 
				!f[key].match(/class/) && !f[key].match(/_data/)) {
				setEntryPoint(_path + f[key] + '/', _arr, _work);
			} else if(f[key].match(/.js$/)) {
				_arr[(_path + f[key]).replace(_work, '')] = _path + f[key];
			}
		}
	});
}


gulp.task('watch', () => {
	watch(conf.path.src+'[^_]**/[^_]*.styl', () => {
		gulp.start(['stylus']);
	});

	watch(conf.path.src+'[^_]**/[^_]*.pug', () => {
		gulp.start(['pug']);
	});

	watch(conf.path.src+'[^_]**/[^_]*.js', () => {
		gulp.start(['webpack']);
	});
})

gulp.task('default', ['watch']);

config.js

module.exports = {
	'path': {
		'src': './_src/',
		'dest': '../'
	}
}

本当はtaskごとにjsファイル分けて読み込んだほうが管理しやすいんだろうけど、一刻もはやく始めたかったのでベタ書き。

webpackの設定ももうちょっと良い書き方があると思うけど一旦待機。一応動くし。

せめてconfigくらいは分けようと思って別ファイル用意したけど結局パスしか書いてない。えへへ。

あとワイルドカードが苦手すぎてsrcがめちゃくちゃダサいんだけどいい書き方ないだろうか・・・イケてる書き方あったら教えてください・・・