【もくもく会】Windows環境でSassを使う！Gulp導入のキモ
•
3 likes•1,537 views
windowsにgulpを導入するまでの流れを説明したものです。未完成に見えて完成です。タイトル詐欺。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Recently uploaded
Recently uploaded (8)
【もくもく会】Windows環境でSassを使う！Gulp導入のキモ
- 2. もくじ ● 自己紹介 ● Gulpを入れてみよう！ ● sassを展開してみよう！ ● どこでつまづいたのか？ ● おわりに
- 3. 自己紹介 ● 宮﨑優子（みやざきまさこ） ● HTML/CSSコーダー、 jQuery時々PHP ● WP歴は2年ちょっと、デザインは出来ない ● Schoo「未経験からWebデザイナーに!先輩達が教 える現場のハナシ」配信スタッフ
- 4. おことわり ● Sassはあんまり出てきません、ごめんなさい。 ● 今日のお話はWindowsにGulpを入れる所までで す。gulpfile.jsの詳しい書き方などは出てきませ ん、ごめんなさい。
- 6. node.jsのインストール ● node-v0.12.0-x64.msiというファイルがDLされ るので実行してください。（2015/03/07現在） ● コマンドプロンプト（黒い画面）を開き、 「node -v」と打ってバージョン情報が表示され たらインストール完了です。 あれ、以外と簡単かも･･･！
- 7. gulpのインストール ● 引き続き黒い画面で「npm install -g gulp」と打 ちます。 ● するとあっという間にインストールが完了しま す！ ● 以上！
- 8. gulpを動かしてみよう ● gulpで出来る事は沢山あるけど、今回はsassを展 開してみます。 ● 適当にsassファイルをどっかからコピってきて作 成しましょう。 ● 適当なhtmlファイルも準備します。
- 9. gulpを動かしてみよう ● 黒い画面から、さっきのsassファイル、htmlファ イルを作成したフォルダへ移動します。 ● 移動は「cd フォルダ名」で移動できます。 ● 移動したらnode.js用のファイルを作成します。 ● 「npm init」と打つと色々と聞かれますが全て 「yes」で乗切ります。 ● すると、「package.json」ファイルが作成されま す。
- 10. gulpを動かしてみよう ● 次に、引き続き黒い画面でgulpモジュールとsass プラグインをインストールします。 ● 「npm install gulp-sass ーーsave-dev」、 「npm install gulp ーーsave-dev」と打ちます。 ● 次はgulpfile.jsを作成します。
- 11. Gulpfile.jsをつくろう // gulpプラグイン読み込み ● var gulp = require('gulp'); ● var sass = require('gulp-sass'); ● // Sass(SCSS)ビルドタスク ● gulp.task('sass', function () { ● // Sass(SCSS)読み込み用ディレクトリ指定 ● gulp.src('./src/assets/scss/*.scss') ● //コンパイルメソッド実行 ● .pipe(sass()) ● //コンパイル後出力ファイル先の指定 ● .pipe(gulp.dest('./src/assets/css')); ● });
- 12. gulpを動かしてみよう ● ここまで辿り着いたら、「gulp」コマンドでgulp を動かしてみます。 ● 黒い画面で「gulp sass」と打ちます。 ● するとCSSフォルダの中にstyle.cssが増えていま す。 ● 実際に見てみましょう～
- 16. おしまい ● ご静聴どうもありがとうございました。 参考にしたサイト ● http://ics-web.jp/lab/archives/3290 ● http://shared-blog.kddi-web.com/activity/245 ● 父さん（齋木さん）、林先生、みんなありがとう！！