3.0.1 • Published 6 years ago

gulpset-skeleton v3.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

gulpset

Gulp based project skeleton with modular tasks.

1. boilerplateをプロジェクトフォルダに入れる

https://github.com/fourdigitdesign/gulpset ダウンロードしたzipを解凍し、 プロジェクトフォルダにコピペなどします。

2. taskを有効化する

gulpset > tasksの中に、XXX.offというフォルダがあります。 この中で、プロジェクトにおいてgulpのtaskとして使用したいものの「.off」を削除します。

例えば、ejsを書くのであれば、ejsをhtmlにコンパイルする必要があるので 「ejs.off」を「ejs」にします。

以下、主なtaskです。

task説明
babelES2015をES5の記法に変換してくれる
browsersyncブラウザシンクする
clean主にbuildフォルダを一旦空にするのに使用
cleancsscssをminifyしてくれる
concatファイルを統合してくれる(a.jsとb.jsをまとめてall.jsのように)
copyコンパイルを通さないファイルを出力先フォルダにコピーして出力してくれる
ejs.ejsを.htmlにコンパイル
eslintjsファイルのコードチェック
sass.scssを.cssにコンパイル
sasslintsassファイルのコードチェック
styliststylusファイルのコードチェック
stylus.stylを.cssにコンパイル
watch指定したファイルの変更監視

4. watchするファイルを設定する

コピペした中で、watchのみ指定ファイルなどが空になっていると思います。 ここに、watchの対象となるファイルのパスと、そのファイルの変更に対して走らせるtaskを記述します。

gulpset.confs.watch = [{
   watch: gulpset.confs.stylus.src,
   run: ["stylus"]
}, {
   watch: gulpset.confs.eslint.src,
   run: ["eslint"]
}, {
   watch: gulpset.confs.ejs.src,
   run: ["ejs"]
}, {
   watch: gulpset.confs.copy.src,
   run: ["copy"]
}];

なお、この時指定するパスは、各taskのsrcを指定します。