フロンエンド開発環境をつくる。gulpのインストールと設定をする。

フロントエンド開発環境をGulpで

最終更新日:2017年8月16日

このサイトは超シンプルにする予定なので、開発環境作らずにCharlesとかで直接編集しようかとも思ってました。 でも、先々のことを考えて、簡単な開発環境をつくることにした。

webpackにしようかとも思ったけど、今回JSはほとんで使わないし、慣れてるGulpで。

gulpのインストール

Node.jsとかはもう入っているので省略。 ターミナル(iTerm)でインストールする場所に移動。

gulpをローカルにインストール(グローバルには既に入れてある)。

sudo npm install gulp

入ったことを確認

gulp -v
[15:24:37] CLI version 3.9.1
[15:24:37] Local version 3.9.1

Gulpでやることは、HTMLのテンプレートエンジン、CSSのプリプロセッサ、JSはコメントを削除してminify。

HTMLは最近やった案件でJadeを使ったので、気分転換にEJS。 CSSはSCSS。 JavaScriptはuglifyのみ。

ソースにはコメントを書きまくりたいけど公開はしたくないのと、パフォーマンス重視でCSSとJavaScriptはminifyする。

下記のプラグインをインストール


gulp
gulp-plumber
gulp-csscomb
gulp-pleeease
gulp-uglify
gulp-ejs
gulp-header
gulp-cached
browser-sync
run-sequence
gulp-rename

※ 下記の「XXXXXXXXX」のところに入れたいプラグイン名を入れてコマンドを打てば、インストールできます。 sudo npm install XXXXXXXXX --save-dev

例:sudo npm install gulp-plumber --save-dev

下記コードを「package.json」としてルートに置けば、npm installするだけで全部インストールされます。

package.json

{
  "private": true,
  "name": "webzin.jp",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "devDependencies": {
    "browser-sync": "^2.14.3",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.0",
    "gulp-csscomb": "^3.0.7",
    "gulp-ejs": "^2.2.0",
    "gulp-header": "^1.8.8",
    "gulp-pleeease": "^2.0.2",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "run-sequence": "^1.2.2"
  }
}

完成したGulp設定ファイルはこちら。

gulpfile.js

'use strict';
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var csscomb = require('gulp-csscomb');
var pleeease = require('gulp-pleeease');
var uglify = require('gulp-uglify');
var ejs = require('gulp-ejs');
var header = require('gulp-header');
var cached = require('gulp-cached');
var browserSync = require('browser-sync');
var runSequence = require('run-sequence');
var rename = require('gulp-rename');
var config = {
  "dir": {
    "dist": "_src",
    "dest": "_media",
    "root": "./"
  },
  "headerBanner": "/**\n * @url: https://webzin.jp/\n */\n",
  "browsers": [
    "last 2 versions",
    "android 4.2",
    "android 4.4"
  ]
}
var dir = config.dir;
// CSS・JSファイルの先頭に入れるバナー
var headerBanner = config.headerBanner;
// HTML convert
gulp.task('ejs', function() {
  return gulp.src(
    [dir.dist + '/_ejs/**/*.ejs','!' + dir.dist + '/_ejs/**/_*.ejs']
  )
  .pipe(cached('ejs'))
  .pipe(plumber())
  .pipe(ejs('',{"ext": ".html"}))
  .pipe(gulp.dest(dir.root));
});
// JavaScript
gulp.task('js', function() {
  return gulp.src(
    [dir.dist + '/_js/**/*.js', '!' + dir.dist + '/_js/**/_*.js']
  )
  .pipe(plumber())
  .pipe(
    uglify(
      {
        preserveComments: 'some',
        compress: {
         drop_console: true
        }
      }
    )
  )
  .pipe(header(headerBanner))
  .pipe(gulp.dest(dir.dest + '/js/'));
});
// CSS
gulp.task('css', function() {
  return gulp.src(
    [dir.dist + '/_scss/**/*.scss', '!' + dir.dist + '/_scss/**/_*.scss']
  )
  .pipe(cached('css'))
  .pipe(plumber())
  .pipe(csscomb())
  .pipe(pleeease({
    autoprefixer: {
      'browsers': config.browsers
    },
    'sass': true,
    'filters': false,
    'rem': false,
    'pseudoElements': false,
    'opacity': false,
    'import': false,
    'mqpacker': true,
    'minifier': true
  }))
  .pipe(header(headerBanner))
  .pipe(rename({
    extname: ".css"
  }))
  .pipe(gulp.dest(dir.dest + '/css'));
});
// TASK Browser
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: './',
      index: 'index.html',
      https: true
    },
    host: 'localhost',
    port: 4444,
    ui: {
      port: 3001
    },
    open: false
  });
});
// TASK browser sync Reload
gulp.task('bs-reload', function() {
  browserSync.reload();
});
// TASK WATCH
gulp.task('watch', function() {
  // html
  gulp.watch(
    dir.dist + '/_ejs/**/*.ejs',
    function() {
      runSequence(
        'ejs',
        'bs-reload'
     );
    }
  );
  // css
  gulp.watch(
    dir.dist + '/_scss/**/*.scss',
    function() {
      runSequence(
        'css',
        'bs-reload'
      );
    }
  );
  // js
  gulp.watch(
    dir.dist + '/_js/**/*.js',
    function() {
      runSequence(
        'js',
        'bs-reload'
      );
    }
  );
});
// Task
gulp.task('default', function() {
  runSequence(['browser-sync', 'watch']);
});

ディレクトリ構造はこちら。

これで、 sudo gulp をすれば、ローカルにWEBサーバーが立ち上がり、css、ejs、JavaScriptを編集するとコンパイル、ブラウザ更新まで自動でおこなわれます。

コメント(0)

コメント投稿画面を開く
CLOSE ×