私が所属する会社では主にBtoB向けのサイトやコーポレートサイト、採用サイトなど、いわゆる「普通」なサイトが多い。
canvasやwebglでゴリゴリ動かす案件や流行りのReact.jsやAngularを使ったSPAみたいなものもあまりない。JSのライブラリもjQueryで事足りてしまう。
ただ焦る気持ちはあるので最低限流行をかじりながらも、一般的なサイトを作るときの開発環境をまとめてみたので興味ある方の参考になれば幸いです。
やりたいこと
- Sassのコンパイル
- ES2015のコードを複数のファイルに書き、結合
- ejsのコンパイル
- ブラウザのオートリロード
- コーディングスタイルの統一
1～4はgulpとwebpack、5はeditorConfigを使います。
ディレクトリ構成
project /
├ editorconfig
├ gulpfile.js
├ public /
└ src /
├ ejs /
├ scss /
└ js /
srcを開発データ、publicを公開データとしています。
gulpとwebpack
JSのみwebpackでコンパイルしています。個人的には以下で十分な気がしています。
（こうしたほうが良いという意見があればいただけますと幸いです。）
npm install babel-core babel-loader babel-preset-es2015 babel-runtime browser-sync gulp gulp-autoprefixer gulp-ejs gulp-plumber gulp-ruby-sass gulp-watch gulp-webpack webpack --save-dev
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const watch = require('gulp-watch');
const ejs = require('gulp-ejs');
const gulpWebpack = require('gulp-webpack');
const webpack = require('webpack');
const sass = require('gulp-ruby-sass');
const autoprefixer = require('gulp-autoprefixer');
const browser = require('browser-sync');
const reload = browser.reload;
const SRC = './src/';
const PUBLIC = './public/';
gulp.task('gulpWebpack', () => {
gulp.src(SRC + 'js/app.js')
.pipe(gulpWebpack({
watch: true,
output: {
filename: "app.js",
},
plugins: [
// 圧縮用の記述
new webpack.optimize.UglifyJsPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
}))
.pipe(gulp.dest(PUBLIC + 'common/js/'))
.pipe(browser.reload({ stream: true }));
});
gulp.task('sass', () => {
return sass(SRC + 'scss/**/*.scss', { style: 'expanded' })
.on('error', (err) => {
console.error('Error!', err.message);
})
.pipe(autoprefixer())
.pipe(gulp.dest(PUBLIC + 'common/css'))
.pipe(browser.reload({ stream: true }));
});
gulp.task('ejs', () => {
gulp.src([
SRC + 'ejs/**/*.ejs',
'!' + SRC + 'ejs/**/_*.ejs' //除外ファイル
])
.pipe(plumber())
//gulp-ejs 2.0.0よりextの記載が必要（記載しないと元々の拡張子でコンパイルされる）
.pipe(ejs('', { 'ext': '.html' }))
.pipe(gulp.dest(PUBLIC))
.pipe(browser.reload({ stream: true }));
});
gulp.task('server', () => {
browser.init(null, {
server: {
baseDir: PUBLIC,
},
port: 8080
});
});
gulp.task('default', ['ejs', 'server', 'sass', 'gulpWebpack'], () => {
gulp.watch([SRC + 'js/**/*.js'], ['gulpWebpack']);
gulp.watch([SRC + 'ejs/**/*.ejs'], ['ejs']);
gulp.watch([SRC + 'scss/**/*.scss'], ['sass']);
});
HTML/CSS/jSはテンプレート化・ライブラリ化し、どの案件でも使いまわしができるようファイルを細かく分けれられる開発環境を意識しています。
HTML
インクルードさせたり、meta関連の設定は自動化させることが多いのでejsを採用。
CSS
ほぼデファクトのSass。autoprefixerを入れていますが、"flex-wrap"がうまくいかないときがあるので注意が必要です。
JS
ファイルをまとめるだけであればbrowserifyでもいいのだが、複数ファイルをビルドする可能性や拡張性、あと後々webpack一本にする可能性もあるためwebpackを採用。（個人的にReact.jsで何かを作ることがあるのでJSのビルドはwebpackのほうが使い慣れている）
webpackにしない理由
JSのところでも記載したように今後はwebpackに統一する可能性はあるが、タスク形式で記述できるGulpのほうがわかりやすく軍配が上がるのではと個人的には思っております。
editorConfig
たまに自分以外の人がコード触ることがるので念のため入れています。弊社は半スペ2です。
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2
最後に・・
上記のコントのようなやり取りを見ていると焦る気持ちもあるが、業務でそこまでたくさんの技術を使うかと言われたら使わないなーと思っています。上場企業なども多いことから、手法よりもCVやPVなどの結果が求められることがほとんどで他に学ぶことが多い。
個人的は最新技術や技術動向を追うことは好きだし、新しい技術を使うこともかなり好き何ですが、業務で使うかと言われたら別なので趣味の開発で上記のコントの内容は追っていきたいと思います。