Blog スタッフブログ

いまどきのWebサイト制作におけるフロントエンド開発環境を構築してみた

Category | Blog
/ 3,451views

こんにちは、2017年春アニメは良作揃いで今からワクワクが止まらないデザイナーの奥田です。

さて、ワクワクといえばIE9、10のサポート終了でかなりできる幅が広がりワクワクしますね。
個人的にはjQueryを切り捨て(jQuery今までありがとう!)できるだけコードはネイティブで書きつつ、モダンな環境で構築するという新たなステージに挑戦しました。

今回は僕が構築したWebサイト制作におけるフロントエンド開発環境をご紹介いたします。
「もっといい方法があるよ!」という方はぜひご一報ください。

Table of contents

  1. 使用するビルドツール
  2. 必要なパッケージをインストールする
  3. gulpfile.jsを作成する
  4. webpack.confg.jsを作成する
  5. 最後に

使用するビルドツール

今まではgulpでBrowserifyを使用していましたが今流行のWebpackに移行しました。
本来Webpackはアセットファイルを一つのJSファイルに統合するのが目的のビルドツールですが、Webサイト制作ではgulpでJSのトランスパイラとして使います。

gulp

Webpack

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

npm install -g webpack gulp

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

npm install --save-dev webpack gulp

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

必要なパッケージをインストールします。
今回使用するのは以下のパッケージです。

babel-core
babel-loader
babel-preset-es2015
browser-sync
gulp-sass
gulp-plumber
gulp-webpack
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を作成する

それではgulpの設定ファイルを作成します。

僕は以下のようにしました。
ディレクトリ構成は個人的な仕様のため適宜変更ください。

// 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']);

構造としては
./src/js/app.jsをトランスパイルし、optimizeしてdist/js/bundle.jsに出力する。
./src/sass内のScssファイルをsassコンパイルしてdist/cssに出力する。
./src/img/内の画像を圧縮し./img/に出力する。
以上の3点を実行しています。

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

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

webpack.confg.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

最後に

いかがだったでしょうか?サイト制作がメインの自分は、「Webpack自体はあまり使い所がないかなー」と思いつつ、でも最新の環境で構築したいという思いからこのような構成に至りました。
何より、脱jQueryとIE9、IE10を切ってもいいという転換期なのが重い腰をあげてくれました。
今回の方法ではまだまだWebpackのちからを最大限には活かせていませんが、まずは今ある環境を移行し、モダンな環境でサイトを制作するというのもいいと思います。

Webpackで簡単にCSSスプライトを作れたり、CSSをJSで読み込んだり本当に色々と出来ます。
皆さんも是非試してみてください。

Category | Blog
Author | Mineo Okuda / 3,451views

Company information

〒651-0087
神戸市中央区御幸通 8-1-6 神戸国際会館 22F

Contact us

WEBに関するお問い合わせは
078-570-5755 (10:00 - 18:00)