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

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

私は常に思ってます。

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

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

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

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

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

node.jsのインストール

https://nodejs.org/en/

npmのバージョン確認

npm -v

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

Windowsの場合
・nodist

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

npmのバージョンアップ

macの場合

npm update -g npm

windowsの場合

nodist npm global match

yarnのインストール

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

npm install -g yarn

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

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

これで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")); //処理を行ったファイルの保存先を指定
    });
});

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

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

Let’s Enjoy Coding Life!!