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

13950 ワード
Sass 今携 Mac gulp Mac テキストリンク

シンプルな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 -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をグローバルにインストールする

＜リンク＞グローバルインストールとは
※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

案件フォルダ作成

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

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

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

＜リンク＞簡単なターミナルの操作を学ぶ

【ターミナル】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.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」に下記を記述して保存する

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 でパーシャルファイルを一括で読み込んで幸せになろう

main.scss
@charset "utf-8";

@import "Base/**";
@import "Layout/**";
@import "Module/**";
@import "Setting/**";
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/"
  }
}
C++面接宝典--デザインモデル
OpenCV Mat詳細