Skip to content

gsg0222/gulpfile-sample

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

以下のようなフォルダ構成を想定しています

project/
   ├ dist/  圧縮したファイルの出力先、ブラウザの自動更新はここを見る
   │
   └ src/  開発ファイルの保存先。編集するのはこのフォルダ内だけ
     ├ css/  CSSファイル置き場、sassから作ったCSSはここに一度保存されて
	 │       それからdistフォルダに圧縮して移動する
	 ├ img/  画像ファイル置き場
	 ├ js/  JavaScriptファイル置き場
	 └ sass/  sassファイル置き場

Git、npmがインストールされていることが前提条件です。任意のフォルダに移動した上で、以下のコマンドを実行してください。
$ git clone https://github.com/gsg0222/gulpfile-sample.git
$ cd gulpfile-sample
$ npm install
$ gulp

・srcファイルからdistに圧縮して必要なファイルが出力されます。したがって、通常開発者はsrcフォルダ内だけを編集することになり、distフォルダ内には手を出すことはありません。
・圧縮したJavascriptファイルには、.minというポストフィックスが付きます。sample.jsで開発を行っていた場合、HTMLから読み込むべきjsファイルはsample.min.jsとなります。
・ブラウザの自動更新が始まります。distフォルダ内のファイルを参照します。srcフォルダを編集してセーブするたびに、自動的にdistも更新されるので手動でリロードする必要がありません。
・sassの自動コンパイルが行われます。

画像、JavaScript、sassの各ファイルは、対応しているフォルダに置かないと、コンパイルや圧縮がなされないので注意してください。

About

sample of gulpfile.jp

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published