【今日から携わる】５分でおわるよ！gulpでsassのコンパイルしませんか？（コピペでオーケー）

シンプルなgulpの環境を手っ取り早く作成したい人向けです

# 環境
Mac

## gulpでsassのコンパイルをしてみましょう

### ファイルをダウンロード
下記より、ファイルをダウンロードする
https://github.com/abenosite/gulp-01

```
node -v
npm install gulp -g
npm install --save
gulp watch
```
・scssファイルが自動でcssファイルにコンパイルされるようになる
・--save は package.json の dependencies に追記される。
・nodeが入っていない場合は、nodeをインストールする


上記、nodeが古くてerrorになる場合
nodebrewを使ってnodeとnpmをアップデートする
```
brew update
nodebrew install-binary stable
nodebrew use stable
npm update -g npm
```



## 詳細

###  【ターミナル】node -v（nodeが入っているか確認）
nodeがインストールされてるかチェック

```
node -v
```

（もし）nodeのバージョン`v10.9.0`などが表示されたら【1-2.】へ進む

### 【ターミナル】nodeインストール

```
brew install node
```

ちゃんとインストールされているか下記のコマンドでチェックする

```
node -v
```

`v10.9.0`などが表示されたら次に進む

nodeやnpmが入ってない場合は下記参照
https://hirooooo-lab.com/development/nstall-node/


### 【ターミナル】gulpインストール（グローバル）
gulpをグローバルにインストールする

[＜リンク＞グローバルインストールとは](https://qiita.com/kijitoraneko/items/175ef29d45d155b3f405)
※gulpをグローバルにインストールすることで`gulp watch`コマンドでscssを自動コンパイルさせることができる。

```
npm install -g gulp
```

ちゃんとインストールされているか下記のコマンドでチェックする

```
gulp -v
```

下記のように表示されればOKです。

```
[23:24:09] CLI version 3.9.1
[23:24:09] Local version 3.9.1
```

### 案件フォルダ作成
下記のようなディレクトリで、空フォルダを作成してください

```html:ディレクトリ見本
gulp-sass
 ├── css //空フォルダ
 ├── scss
 |    └── main.scss //空ファイル作成
 └── gulpfile.js //空ファイル作成

```

ターミナルでgulp-sassフォルダに移動

[＜リンク＞簡単なターミナルの操作を学ぶ](https://qiita.com/FJHoshi/items/7fdf363b47ba4afa1834)

### 【ターミナル】npm init
※npmをインストールした後最初に使用する初期化処理するコマンドです。 初期化処理を行うことで、package.jsonが生成されます。

```
npm init
```

エンターを連打する（10回くらい）


### 【ターミナル】npm install --save-dev gulp
※--save-dev は package.json の devDependencies に追記されるそうです。
> 勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)
> （https://qiita.com/msakamoto_sf/items/a1ae46979a42d6948ebd）

```
npm install gulp -g
npm install --save-dev gulp
```

### 【ターミナル】npm install --save-dev gulp-sass

```
npm install --save-dev gulp-sass
```

### gulpfile.js作成
空の「gulpfile.js」に下記を記述して保存する

```gulpfile:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('scss/*.scss') 
    .pipe(sass({
        style : 'expanded', 
    }))
    .pipe(gulp.dest('css/'));
});
gulp.task('watch', function () {
    gulp.watch('scss/*.scss', ['sass']);
});
```

### main.scss作成
空の「main.scss」に下記を記述して保存する

```sass:main.scss
body {
    font-size: 10px;
    main {
        font-size: 1.6rem;
    }
    .text-danger {
        color: red;
    }
}
```

### 【ターミナル】gulp watch

```
gulp watch
```

cssを吐き出すようになります。
※変更したscssを保存した瞬間にcssが自動でコンパイルされるようになります。





#おわりに
「タスクランナーってなに？　Gulpは難しいから使いたくない！」って言う人がいます。（先月までの自分の言葉）
しかし、最低限なら簡単に実装することもできるのです。

今回使ったgulpファイルはカスタムが可能です。
カスタムすれば、下記のタスクを自動で行うことができるようになります。

・CSSやJavaScriptなどの圧縮
・画像の圧縮
・HTMLの文法チェック
・CSSの文法チェック
・メディアクエリの順番を整頓
・ブラウザーのベンダープリフィックスを自動付与
・プロパティの順番を整理
・CSSのスタイルガイドを自動生成
・EJS形式で書かれたファイルをHTMLに変換

ターミナル操作に慣れてない方はLinuxコマンドの練習が必要になります。
必ずgulp以外でも役にたちます。
黒い画面に慣れてください。めちゃ便利です。

最後に、面倒なgulpファイルを自動で生成するサイトを紹介して終わります。
### gulp generator
>http://steelydylan.github.io/gulp-generator/

# 追記（gulpのカスタム）

## glob でパーシャルファイルを一括で読み込んで幸せになろう

```sass:main.scss
@charset "utf-8";

@import "Base/**";
@import "Layout/**";
@import "Module/**";
@import "Setting/**";
```

```js:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');

gulp.task('sass', function () {
  gulp.src('assets/scss/*.scss')
    .pipe(sassGlob())
    .pipe(sass({
        style : 'expanded',
    }))
    .pipe(gulp.dest('assets/css/'));
});
gulp.task('watch', function () {
    gulp.watch('assets/scss/*.scss', ['sass']);
});
```


```
npm install --save
```

```
npm install --save-dev gulp-sass-glob
```

```
gulp watch
```


## 参考
> 【Sass】固定と可変どちらもいける簡単グリッドシステム【Mixin】 @sawadays0118
> https://qiita.com/sawadays0118/items/8dccaf00a7452ee41295

> nodebrewでnodeのバージョンを切り替える方法
> https://qiita.com/kuriya/items/36ae29366df0b7c95dec

参考gulpfile

```
var path = require("path");
var fs = require("fs");
var pkg = JSON.parse(fs.readFileSync("./package.json"));
var assetsPath = path.resolve(pkg.path.assetsDir);

var gulp = require("gulp");

// sass compiler
var sass = require("gulp-sass");
var sassGlob = require("gulp-sass-glob");

// add vender prifix
// var autoprefixer = require("gulp-autoprefixer");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var postcssGapProperties = require("postcss-gap-properties");

// error handling
var plumber = require("gulp-plumber");


gulp.task("scss", function () {
  gulp
    .src(path.join(assetsPath, "assets/scss/**/*.scss"))
    .pipe(sassGlob())
    .pipe(plumber())
    .pipe(
      sass({
        indentType: "space",
        indentWidth: 4
      })
    )

    .pipe(postcss([
      postcssGapProperties(),
      autoprefixer({
        grid: true
//     cascade: false
      })
    ]))


    //.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest(path.join(assetsPath, "assets/scss/")));
});

// コードフォーマット
gulp.task("prettier", () => {
  return gulp
    .src(["/src/**/scss/*.{sass,scss}", "/src/**/js/*.js"])
    .pipe(
      prettierPlugin({
        //①Prettierのオプションを指定する
        prettier: {
          singleQuote: false,
          tabWidth: 4
        }
      }, {
        filter: true
      })
    )
    .pipe(gulp.dest(file => file.base));
});

gulp.task("watch", function () {
  gulp.watch(path.join(assetsPath, "assets/scss/**/*.scss"), ["scss"]);
});

```

package.json

```
{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "sass-format": "prettier-stylelint --quiet --write ./public/sass/**/**.scss",
    "html-format": "prettier --write ./public/**/*.{html,php}"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "acorn": "^6.0.4",
    "bootstrap": "^4.1.3",
    "izimodal": "^1.5.1",
    "popper.js": "^1.14.6",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "@prettier/plugin-php": "^0.6.0",
    "autoprefixer": "^8.6.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-plumber": "^1.2.0",
    "gulp-postcss": "^7.0.1",
    "gulp-prettier-plugin": "^1.3.0",
    "gulp-sass": "^4.0.1",
    "gulp-sass-glob": "^1.0.9",
    "popper": "^1.0.1",
    "postcss-custom-properties": "^8.0.9",
    "prettier": "^1.15.1",
    "prettier-stylelint": "^0.4.2",
    "sass-lint": "^1.12.1",
    "stylelint-config-standard": "^18.2.0",
    "postcss-gap-properties": "^1.0.0"
  },
  "path": {
    "assetsDir": "./public/"
  }
}

```