サイト制作者なら押さえておきたい!モダンなフロントエンド開発環境まとめ

今回はフロントエンドの開発者なら押さえておきたい、モダンな開発環境の構築方法をまとめてみました。

知らなかった部分があったらこの際なので環境構築をしてしまいましょう。

 

gulp、Webpackをインストール

モダンな開発環境開発環境gulpは必須ですね。

Webpackは本来は複数のアセットファイルを1つのjsファイルに統合するのが目的ですが、gulpのjsトランスコンパイラとして使用できます。

まずはgulp、Webpackをグローバルインストールします。

npm install -g webpack gulp

 

ワーキングディレクトリにもインストールしましょう。

npm install --save-dev webpack gulp

 

必要なパッケージをインストール

必要なパッケージをじゃんじゃんインストールしていきます。

使用するのは以下のパッケージです。

  1. babel-core
  2. babel-loader
  3. babel-preset-es2015
  4. browser-sync
  5. gulp-sass
  6. gulp-plumber
  7. gulp-webpack
  8. gulp-imagemin

 

ではまとめてインストールしてしまいましょう。

npm install --save-dev babel-core babel-loader babel-preset-es2015 browser-sync gulp-sass gulp-plumber gulp-webpack gulp-imagemin

 

gulpfile.jsを作成

gulpfile.jsを作成し、設定していきます。

今回は以下のように設定しました。ディレクトリ構成は各自変更してください。

// gulpfile.js
var browserSync = require('browser-sync'),
 gulp = require('gulp'),
 sass = require('gulp-sass'),
 plumber = require('gulp-plumber'),
 webpack = require('gulp-webpack')
 imagemin = require("gulp-imagemin");
 
gulp.task('sass', function() {
 gulp.src("src/sass/*.scss")
.pipe(plumber())
.pipe(sass({outputStyle: 'compressed'}))
.on('error', function(err) {
 console.log(err.message);
})
.pipe(gulp.dest("dist/css"))
.pipe(browserSync.stream());
});
 
gulp.task('webpack',function(){
 gulp.src(['src/js/app.js'])
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest("dist/js"))
.pipe(browserSync.stream());
});
 
gulp.task('js-watch', ['webpack'], function (done) {
 browserSync.reload();
done();
});
 
gulp.task('imagemin', function(){
return gulp.src('src/img/**/*')
.pipe(imagemin({
 verbose: true,
 progressive: true,
 plugins: [
 imagemin.gifsicle({interlaced: true}),
 imagemin.jpegtran({progressive: true}),
 imagemin.optipng({optimizationLevel: 5}),
 imagemin.svgo({plugins: [{removeViewBox: true}]})
]
}))
.pipe(gulp.dest('img'));
});
 
gulp.task('serve', ['sass','webpack'], function() {
 browserSync.init({
 server: "./"
});
 
 gulp.watch(["src/sass/*.scss","src/sass/**/*.scss"], ['sass']);
 gulp.watch(["src/js/app.js","src/js/lib/*.js"],["webpack"]);
 gulp.watch(["*.html","**/*.html"]).on('change', browserSync.reload);
 gulp.watch("src/img/**/*", ['imagemin']);
});
 
gulp.task("default",['serve']);

構造としては以下の3点を実行しています。

./src/js/app.jsをトランスパイルし、optimizeしてdist/js/bundle.jsに出力する。

./src/sass内のScssファイルをsassコンパイルしてdist/cssに出力する。

./src/img/内の画像を圧縮し./img/に出力する。

 

JSはapp.js内でモジュールをimportして使用します。

//例えばまだまだjQueryを使用したい方
import $ from 'jquery'; // パッケージがない方はnpm install --save-dev jqueryをしましょう。

 

webpack.config.js

process.noDeprecation = true;
const webpack = require("webpack")
,path = require('path');
 
module.exports = {
 entry: path.join(__dirname , "src/js/app.js"),
 output: {
 filename: 'bundle.js'
},
 plugins: [
new webpack.optimize.UglifyJsPlugin({
 compress: { warnings: false }
})
],
module: {
 loaders: [
{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: "babel-loader",
 query:{
 presets: ['es2015']
}
}
]
}
}

上記のコードを記述し、以下のコマンドを実行すればgulpが立ち上がりブラウザーが自動で起動します。

gulp

 

まとめ

gulpをWebpackで開発環境を構築してみました。

Webpackがあると簡単にCSSスプライトを作れたり、CSSをJSで読み込んだりと色々できるようになります。

より便利になるのでよかったら試してみてくださいね。