シンプルな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をグローバルにインストールする
＜リンク＞グローバルインストールとは
※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」に下記を記述して保存する
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」に下記を記述して保存する
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
追記（gulpのカスタム）
glob でパーシャルファイルを一括で読み込んで幸せになろう
@charset "utf-8";
@import "Base/**";
@import "Layout/**";
@import "Module/**";
@import "Setting/**";
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/"
}
}