Gulpでの開発について

MAGAZINE

: Twitter

: Facebook

KEYWORDS: gulp 開発環境

WEB

HPのコーディングって作業が多い

そんなこと思ったことありませんか？

私は常に思ってます。

正常な文書構造、SEOの重要性、デザインと構造の折り合いをつける、アニメーション、javascript、CMSの知識、ウェブマーケティング、サーバーの基本的な知識、ドメイン、DNSの知識・・・・etc

そこに流行や、最新の技術などの勉強を常にしていくとなると、時間がいくらあっても足りない！

なので私はコーディング時にどれだけ作業を高速化できるか、
無駄を排除できるかを考えてます。

そんな私の最近のコーディング時に使用しているタスクランナーの紹介をします。

gulpのインストールについて

node.jsのインストール

https://nodejs.org/en/

npmのバージョン確認

npm -v

npm -v

*ちなみにnode.jsなどのインストールにはバージョン管理ツールを入れるのをおすすめします。
Macの場合
・brew（Homebrew、nodebrew）

Windowsの場合
・nodist

インストールの仕方はググってください。
後日ブログにあげるかも・・・・

npmのバージョンアップ

macの場合

npm update -g npm

1	npm update -g npm

windowsの場合

nodist npm global match

1	nodist npm global match

yarnのインストール

*yarnとはFacebook社の開発したnpm互換のパッケージ管理ツールです
npmよりも高速のため、今回記入します。

npm install -g yarn

1	npm install -g yarn

ようやく本題、Gulpパッケージをインストールします

yarn init
yarn add gulp

1 2	yarn init yarn add gulp

これでコーディング予定のフォルダ内に「package.json」と「node_modules」が入っていると思います。

Gulpを使うにはgulpfile.jsというファイルが必要です。

このファイルにgulpで使用するパッケージの挙動を書きます。
ちなみに私のgulpの構成は下記です。

gulp-sass
gulp-autoprefixer
gulp-plumber
gulp-changed
gulp-imagemin
imagemin-jpeg-recompress
imagemin-pngquant
imagemin-gifsicle
imagemin-mozjpeg
browser-sync
webpack
webpack-stream

このパッケージで下記の作業をさせてます

jsをwebpackでコンパイル
scssをnode-sassでコンパイル
css内に自動でAutoprefixをつける
画像の容量を圧縮（jpeg,jpg,png,gif）
js,css,html,phpを保存した時点でブラウザを自動リロード

gulpを使う方法

gulpfile.jsと同じ階層にコマンドラインで移動して、コマンドを入力

yarn run gulp

1	yarn run gulp

これでgulpが起動します。

gulpファイルの内容は下記に公開します

//プラグインの読み込み
const gulp = require("gulp");
const sass = require("gulp-sass");
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber  = require('gulp-plumber');
const changed  = require('gulp-changed');
const imagemin = require('gulp-imagemin');
const imageminJpg = require('imagemin-jpeg-recompress');
const imageminPng = require('imagemin-pngquant');
const imageminGif = require('imagemin-gifsicle');
const mozjpeg  = require('imagemin-mozjpeg');
const browserSync = require('browser-sync');

const folderName = ".."

// 圧縮前と圧縮後のディレクトリを定義
const paths = {
  srcDir : 'src',// 圧縮前のディレクトリ
  dstDir : folderName+'/assets'// 圧縮後のディレクトリ
}

gulp.task('bs-reload', function () {
  browserSync.reload();
});

//タスクの定義
gulp.task("default", function() {
  // jpg,png,gif画像の圧縮タスク
    var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif)';
    var dstGlob = paths.dstDir;
    gulp.watch( srcGlob , function(){
    gulp.src( srcGlob )
    .pipe(changed( dstGlob ))
    .pipe(imagemin([
        imageminPng(),
        imageminJpg(),
        imageminGif({
            interlaced: false,
            optimizationLevel: 3,
            colors:180
        })
    ]
    ))
    .pipe(gulp.dest( dstGlob ));
    });
    browserSync({
      // proxy: "http://ドメイン.属性/",
      // files: [
      //   "../**/*.css",
      //   "../**/*.js",
      //   "../**/*.php",
      // ]
      server: {
         baseDir: folderName       //対象ディレクトリ
        ,index  : "index.html"      //インデックスファイル
      }
    });
  gulp.watch( folderName+"/*.html" ,['bs-reload']); //どのファイルがセーブされたらリロードするか指定
  gulp.watch( folderName+"/css/*.css" ,['bs-reload']); //どのファイルがセーブされたらリロードするか指定
  gulp.watch("./scss/*.scss", function(){
    gulp.src("./scss/*.scss") //ファイルの参照先を指定
      .pipe(plumber())
      .pipe(sourcemaps.init())
      .pipe(sass({
        includePaths: require('node-reset-scss').includePath,
        outputStyle: 'expanded'
      }).on('error', sass.logError)) //プラグインの実行
      .pipe(sourcemaps.write({includeContent: false}))
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(autoprefixer())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest("../css")); //処理を行ったファイルの保存先を指定
    });
});

//プラグインの読み込み

const gulp = require("gulp");

const sass = require("gulp-sass");

const autoprefixer = require('gulp-autoprefixer');

const sourcemaps = require('gulp-sourcemaps');

const plumber = require('gulp-plumber');

const changed = require('gulp-changed');

const imagemin = require('gulp-imagemin');

const imageminJpg = require('imagemin-jpeg-recompress');

const imageminPng = require('imagemin-pngquant');

const imageminGif = require('imagemin-gifsicle');

const mozjpeg = require('imagemin-mozjpeg');

const browserSync = require('browser-sync');

const folderName = ".."

// 圧縮前と圧縮後のディレクトリを定義

const paths = {

srcDir : 'src',// 圧縮前のディレクトリ

dstDir : folderName+'/assets'// 圧縮後のディレクトリ

}

gulp.task('bs-reload', function () {

browserSync.reload();

});

//タスクの定義

gulp.task("default", function() {

// jpg,png,gif画像の圧縮タスク

var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif)';

var dstGlob = paths.dstDir;

gulp.watch( srcGlob , function(){

gulp.src( srcGlob )

.pipe(changed( dstGlob ))

.pipe(imagemin([

imageminPng(),

imageminJpg(),

imageminGif({

interlaced: false,

optimizationLevel: 3,

colors:180

})

]

))

.pipe(gulp.dest( dstGlob ));

});

browserSync({

// proxy: "http://ドメイン.属性/",

// files: [

// "../**/*.css",

// "../**/*.js",

// "../**/*.php",

// ]

server: {

baseDir: folderName //対象ディレクトリ

,index : "index.html" //インデックスファイル

}

});

gulp.watch( folderName+"/*.html" ,['bs-reload']); //どのファイルがセーブされたらリロードするか指定

gulp.watch( folderName+"/css/*.css" ,['bs-reload']); //どのファイルがセーブされたらリロードするか指定

gulp.watch("./scss/*.scss", function(){

gulp.src("./scss/*.scss") //ファイルの参照先を指定

.pipe(plumber())

.pipe(sourcemaps.init())

.pipe(sass({

includePaths: require('node-reset-scss').includePath,

outputStyle: 'expanded'

}).on('error', sass.logError)) //プラグインの実行

.pipe(sourcemaps.write({includeContent: false}))

.pipe(sourcemaps.init({loadMaps: true}))

.pipe(autoprefixer())

.pipe(sourcemaps.write())

.pipe(gulp.dest("../css")); //処理を行ったファイルの保存先を指定

});

ちなみにこれはwordpressのコーディングでも使用可能です。
上記ファイルのserver部分をコメントアウトして、proxy部分を使えばできます。

昨日のVCCWと合わせてコーディングすると効率的ですよ！

Let’s Enjoy Coding Life!!

YAS

2011年よりweb制作に従事。現在は主にWordpressによるサイト制作の他、DNS切替時や、サーバー移管時の各種トラブル解決を行っています。