GulpでPug&Sassの環境を作る

package.jsonを作成

$ npm init -y

Gulpをインストール

$ pm install gulp --save

( –save はdependenciesにインストール )

「Cannot find module ‘../lib/completion’」のようなエラーが出たら
https://stackoverflow.com/questions/36081200/cannot-find-module-lib-completion-inspite-of-installing-completion
上記の通り、一回アンインストール&再インストールで解消

gulpfile.jsを作成

この時点では中身は空でOK

Sassをインストール

$ npm install gulp-sass --save 

( –save はdependenciesにインストール )

gulp.task('default', function () {
	gulp.src('source/sass/common.sass')
	.pipe(sass())
	.pipe(gulp.dest('public/css'));
});

gulpfile.jsに追記。
/source/sass/にあるcommon.sassを/public/css/にcommon.cssとして吐き出す。

gulp.task('sass', function () {
    gulp.src('source/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('public/css'));
});

source/sass/配下全てのSassファイルを対象にするよう、再帰的(リカーシヴ)処理する定義「**/*.sass」に書き換え。

gulp.task('sass', function () {
    gulp.src(['source/sass/**/*.sass','!source/sass/**/_*.sass'])
	.pipe(sass())
	.pipe(gulp.dest('public/css'));
});

インクルードする用の「_header.sass」のようなファイル名の頭に「_」がついたファイルは除外するように書き換え

Autoprefixerをインストール


https://blog.shibayu36.org/entry/2016/07/20/102641

CSSCombをインストール


CSSComb

Pugをインストール

$ npm install gulp-pug --save 

( –save はdependenciesにインストール )

gulp.task('pug', function () {
	gulp.src(['source/pug/**/*.pug','!source/pug/**/_*.pug'])
	.pipe(pug())
	.pipe(gulp.dest('public'));
});

試しに

html
    head
    body

をコンパイルしたら

<html><head></head><body></body></html>

インデントも改行もない…。

gulp.task('default', function () {
	gulp.src('source/pug/index.pug')
	.pipe(pug({ pretty: true }))
	.pipe(gulp.dest('public'));
});

pug()に引数{pretty: true}を渡すことでインデント&改行がされるようになった。

PugとSassをwatchする

gulp.task('watch', function(){
    gulp.watch(['source/sass/**/*.sass','!source/sass/**/_*.sass'],['sass']);
    gulp.watch(['source/pug/**/*.pug','!source/pug/**/_*.pug'],['pug']);
});

実行コマンド

$ npx gulp

タスクgulp.tast(‘default’,function(){});を実行する。

browserSyncをインストール

https://www.browsersync.io/docs/api
https://browsersync.io/docs/options

$ npm install browswer-sync --save 
const bs = require("browser-sync").create();
gulp.task('browserSync', function () {
	bs.init({
		server: "./public/",
		files: [ "./**/*.css","./**/*.html", ]
	});
});

ドキュメントルートを/public/に、その配下の「.html」「.css」を監視して、変更を検知したらブラウザをリロードする、という処理。

$ gulp browserSync

で実行。

.gitignore作る

/public/img
画像はアップしないようにしておくのがベター。
Gitで管理する必要は無い。