とりあえず環境構築（mac）

#目的
HTML・CSS（SASS）・JavaScriptのコーディングにおいて、コーディング以外の作業が諸々発生するわけですが、それを自動で行ってくれる設定を作りました。

例えば、実際にコーディングするscssやjsのファイルは複数に分けてsrcフォルダにいれてますが、htmlファイルが読みに行くcssやjsのファイルはdistフォルダにいれてます。

手動で全てする場合は、複数のファイル内容を実際に読みに行くファイルにコピペをしなければいけない。

そういったことを自動でやってくれたら便利じゃん！！
…ということがやりたいことでございます。

#やりたかったこと

• srcフォルダの複数ファイルのコードをdistフォルダの任意のファイルにまとめる。
• ファイル（画像、css、js）の圧縮。
• scssファイルのコンパイル。（sass記法でコーディングしたものをcss形式に書き換える）
• jsファイルのトランスパイル。（ES6で書いたコードを、ES5の形式に書き換える）
• ブラウザのdevツールで、コードを書いている場所が表示されるが、参照先のファイルではなく、srcフォルダの場所を表示するようにする。
• cssのプレフィックスを自動で付与。
• ファイル保存時に、エラーがあったら通知してくれる。
• srcフォルダのファイルを更新したら自動で上記作業を実施。さらにブラウザを自動でリロードする。

#ディレクトリ構成

ディレクトリ

root
│ 
├──index.html
│ 
├──dist
│   ├──css
│   │   └── app.min.css
│   ├──js
│   │   └── app.min.js
│   └──img
│   
├──src
│   ├──sass
│   │   ├──app.scss
│   │   ├──foundation
│   │   │    ├── _base.scss
│   │   │    └── _reset.scss
│   │   ├──layout
│   │   │    ├── _header.scss
│   │   │    ├── _main.scss
│   │   │    └── _footer.scss
│   │   └──object
│   │        ├── _object.scss
│   │        ├── _project.scss
│   │        └── _utility.scss
│   ├──js
│   │   ├── app1.js
│   │   └── app2.js
│   └──img
│ 

環境構築

下記の環境で実行しております。。

・Mac　10.14.6（Mojave）
・MAMP
・npm（6.14.4）※nvmでインストール
・node.js（12.16.3）※yarnでインストール
・yarn（1.22.4）※homebrewでインストール
・gulp （2.2.1）※yarnでインストール

package.json

package.json

{
  "name": "",
  "version": "1.0.0",
  "main": "index.html",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-changed": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {},
  "scripts": {}
}

gulpfile.js

gulpfile.js

const gulp = require("gulp");
const rename = require("gulp-rename"); //ファイル名をリネームするプラグイン
const concat = require("gulp-concat"); //複数ファイルを１つにコンパイルするプラグイン
const imagemin = require("gulp-imagemin"); //画像ファイルを圧縮するプラグイン
const sourcemaps = require("gulp-sourcemaps"); //デベロッパーツール上でコンパイル前の場所を示してくれるプラグイン
const plumber = require("gulp-plumber"); //Watch中エラー発生時にWatchの停止を防止するプラグイン
const notify = require("gulp-notify"); //エラー発生時に通知するプラグイン
const changed = require("gulp-changed"); //保存先と指定したディレクトリと比較するプラグイン
//CSS関連プラグイン
const autoprefixer = require("gulp-autoprefixer"); //自動でプレフィックスを付与するプラグイン
const cleadCSS = require("gulp-clean-css"); //cssを圧縮するプラグイン
const sass = require("gulp-sass"); //sassをコンパイルするプラグイン
//JavaScript関連プラグイン
const babel = require("gulp-babel"); //babelプラグイン
const uglify = require("gulp-uglify"); //JavaScriptを圧縮するプラグイン
//browserSyncプラグイン
const browserSync = require("browser-sync").create();

//================================================================================

//sassからcssへのコンパイル
//エラー検知した際に通知
//ベンダープレフィックスも自動付与
//デベロッパーツール上でコンパイル前のsファイルの場所を示すようにする
//コンパイルしたファイルをsrc配下に保存する
//圧縮する
//圧縮したものをリネームしてdist配下に保存する

gulp.task("sass", (done) => {
  gulp
    .src("src/scss/**/*.scss")
    .pipe(
      plumber({
        errorHandler: notify.onError("<%= error.message %>"),
      })
    )
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        outputStyle: "expanded",
      }).on("error", sass.logError)
    )
    .pipe(
      autoprefixer({
        cascade: false,
      })
    )
    .pipe(gulp.dest("src/dist/css/"))
    .pipe(cleadCSS())
    .pipe(
      rename({
        suffix: ".min",
      })
    )
    .pipe(sourcemaps.write("../maps"))
    .pipe(gulp.dest("dist/css/"));
  done();
});

//================================================================================

//jsファイルのトランスパイル(ES5の書き方をES5以前の書き方に変換してくれる)
//エラー検知した際に通知
//デベロッパーツール上でコンパイル前のファイルの場所を示すようにする
//コンパイルしたファイルをsrc配下に保存する
//圧縮する
//圧縮したものをリネームしてdist配下に保存する
gulp.task("babel", (done) => {
  gulp
    .src("src/js/**/*.js")
    .pipe(
      plumber({
        errorHandler: notify.onError("<%= error.message %>"),
      })
    )
    .pipe(sourcemaps.init())
    .pipe(
      babel({
        presets: ["@babel/env"],
      })
    )
    .pipe(concat("app.js"))
    .pipe(gulp.dest("src/dist/js"))
    .pipe(uglify())
    .pipe(
      rename({
        suffix: ".min",
      })
    )
    .pipe(sourcemaps.write("../maps"))
    .pipe(gulp.dest("dist/js"));
  done();
});

//================================================================================

//画像ファイルを圧縮する
gulp.task("imagemin", (done) => {
  gulp
    .src("src/img/*")
    .pipe(imagemin())
    .pipe(gulp.dest("dist/img"))
    .pipe(changed("/dist/img"));
  done();
});

//================================================================================

//browser-Syncによるサーバー起動
gulp.task("serve", (done) => {
  browserSync.init({
    server: {
      baseDir: "./",
      index: "index.html",
    },
  });
  done();
});

//サーバーを監視して、変更があれば自動的にコンパイル・トランスパイル・ブラウザリロード・画像圧縮を実行する
gulp.task("watch", () => {
  const browserReload = (done) => {
    browserSync.reload();
    done();
  };
  gulp.watch("src/**/*", browserReload);
  gulp.watch("./index.html", browserReload);
  gulp.watch("src/scss/**/*.scss", gulp.series("sass"));
  gulp.watch("src/img/**/*", gulp.series("imagemin"));
  gulp.watch("src/js/*.js", gulp.series("babel"));
});

//================================================================================

//コマンド上で「yarn gulp」を実行すれば全部まとめて実行してくれる。
gulp.task(
  "default",
  gulp.series("serve", "sass", "babel", "imagemin", "watch")
);

#自動監視スタート！

コマンド

$ yarn gulp

　// -> これでファイルを更新する度に、諸々作業を自動でしてくれます！

##作業後の感想というかツブヤキ。

• ある程度まではweb上の情報をそのままでなんとかなりますが、自分の好みにしようと思うと試行錯誤が必要になりますね。。モジュールもたくさんあるので、これからいろいろ試してみようと思います。

• リセット前にも構築した際はbabelが最新のものではなぜか動かずでした。
  （babel-preset-es2015とか入れました）
  原因はわかりませんが…nodeのバージョンとかが関係あるのかしら？
  リセット前のバージョンの記録を残していなかったので検証のしようもないですね。。（反省）
  今後はしっかり記録を残そうと心に誓いました。。