Submit Search
Upload
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
•
3 likes
•
1,538 views
Masako Miyazaki
Follow
windowsにgulpを導入するまでの流れを説明したものです。未完成に見えて完成です。タイトル詐欺。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 16
Download now
Download to read offline
Recommended
Webページで学ぶJavaScript2013 第8回
Webページで学ぶJavaScript2013 第8回
京大 マイコンクラブ
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
Webページで学ぶJavaScript2013 第6回
Webページで学ぶJavaScript2013 第6回
京大 マイコンクラブ
Crystal 勉強会 #5 in 渋谷 発表資料
Crystal 勉強会 #5 in 渋谷 発表資料
at grandpa
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
Erina Takei
Recommended
Webページで学ぶJavaScript2013 第8回
Webページで学ぶJavaScript2013 第8回
京大 マイコンクラブ
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
Webページで学ぶJavaScript2013 第6回
Webページで学ぶJavaScript2013 第6回
京大 マイコンクラブ
Crystal 勉強会 #5 in 渋谷 発表資料
Crystal 勉強会 #5 in 渋谷 発表資料
at grandpa
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
Erina Takei
Bootstrap
Bootstrap
Masaki Kusuhata
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
Ryunosuke SATO
まだやれる Css preprocesser
まだやれる Css preprocesser
Shinya Sugo
好感度をアップさせるための表情トレーニング【男性編】 先生:内田 佳代
好感度をアップさせるための表情トレーニング【男性編】 先生:内田 佳代
schoowebcampus
最近知ったBootstrapの注意点
最近知ったBootstrapの注意点
Kawaji Masaki
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
Yuusuke Takeuchi
毎日ブログを書いてみた ブロガーズフェスティバル 2015
毎日ブログを書いてみた ブロガーズフェスティバル 2015
Mayuko Moriyama
Crystalを触り始めてから起こったこと
Crystalを触り始めてから起こったこと
at grandpa
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
Satoshi Noda
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭
司 知花
Make TypingGame in JavaScript
Make TypingGame in JavaScript
undertale1
PhpStormとGrunt.jsで作るCakePHP快適開発環境
PhpStormとGrunt.jsで作るCakePHP快適開発環境
kamiyam .
ブラウザのブックマークの小咄
ブラウザのブックマークの小咄
Akira HIRATA
Swiftをやってみた!
Swiftをやってみた!
Aya Ebata
2021 01-25 lt sho kato
2021 01-25 lt sho kato
katosho1
PlayCanvasで始めるWebXR
PlayCanvasで始めるWebXR
RyutoHaga
プログラマのためのPC自動化
プログラマのためのPC自動化
高見 知英
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
schoowebcampus
【再放送】生放送の前にJQueryについて復習しよう!
【再放送】生放送の前にJQueryについて復習しよう!
schoowebcampus
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
gulp勉強会@IVP
gulp勉強会@IVP
Daisuke Onoe
More Related Content
What's hot
Bootstrap
Bootstrap
Masaki Kusuhata
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
Ryunosuke SATO
まだやれる Css preprocesser
まだやれる Css preprocesser
Shinya Sugo
好感度をアップさせるための表情トレーニング【男性編】 先生:内田 佳代
好感度をアップさせるための表情トレーニング【男性編】 先生:内田 佳代
schoowebcampus
最近知ったBootstrapの注意点
最近知ったBootstrapの注意点
Kawaji Masaki
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
Yuusuke Takeuchi
毎日ブログを書いてみた ブロガーズフェスティバル 2015
毎日ブログを書いてみた ブロガーズフェスティバル 2015
Mayuko Moriyama
Crystalを触り始めてから起こったこと
Crystalを触り始めてから起こったこと
at grandpa
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
Satoshi Noda
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭
司 知花
Make TypingGame in JavaScript
Make TypingGame in JavaScript
undertale1
PhpStormとGrunt.jsで作るCakePHP快適開発環境
PhpStormとGrunt.jsで作るCakePHP快適開発環境
kamiyam .
ブラウザのブックマークの小咄
ブラウザのブックマークの小咄
Akira HIRATA
Swiftをやってみた!
Swiftをやってみた!
Aya Ebata
2021 01-25 lt sho kato
2021 01-25 lt sho kato
katosho1
PlayCanvasで始めるWebXR
PlayCanvasで始めるWebXR
RyutoHaga
プログラマのためのPC自動化
プログラマのためのPC自動化
高見 知英
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
schoowebcampus
【再放送】生放送の前にJQueryについて復習しよう!
【再放送】生放送の前にJQueryについて復習しよう!
schoowebcampus
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
What's hot
(20)
Bootstrap
Bootstrap
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
まだやれる Css preprocesser
まだやれる Css preprocesser
好感度をアップさせるための表情トレーニング【男性編】 先生:内田 佳代
好感度をアップさせるための表情トレーニング【男性編】 先生:内田 佳代
最近知ったBootstrapの注意点
最近知ったBootstrapの注意点
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
毎日ブログを書いてみた ブロガーズフェスティバル 2015
毎日ブログを書いてみた ブロガーズフェスティバル 2015
Crystalを触り始めてから起こったこと
Crystalを触り始めてから起こったこと
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
2013/03/09 VisualStudio勉強会 LT 「統合開発環境の支援ツール」
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Make TypingGame in JavaScript
Make TypingGame in JavaScript
PhpStormとGrunt.jsで作るCakePHP快適開発環境
PhpStormとGrunt.jsで作るCakePHP快適開発環境
ブラウザのブックマークの小咄
ブラウザのブックマークの小咄
Swiftをやってみた!
Swiftをやってみた!
2021 01-25 lt sho kato
2021 01-25 lt sho kato
PlayCanvasで始めるWebXR
PlayCanvasで始めるWebXR
プログラマのためのPC自動化
プログラマのためのPC自動化
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
レスポンシブなサイトにあっという間にjQueryを実装する 先生:田中 晶子
【再放送】生放送の前にJQueryについて復習しよう!
【再放送】生放送の前にJQueryについて復習しよう!
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Viewers also liked
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
gulp勉強会@IVP
gulp勉強会@IVP
Daisuke Onoe
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Asami Kamei
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
リクルートの利用事例から考える AWSの各サービスとセキュリティ
リクルートの利用事例から考える AWSの各サービスとセキュリティ
Recruit Technologies
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
AWSでのセキュリティ運用 ~IAM,VPCその他
AWSでのセキュリティ運用 ~IAM,VPCその他
Recruit Technologies
AWSでセキュリティを高める!
AWSでセキュリティを高める!
Serverworks Co.,Ltd.
AWS Black Belt Techシリーズ Amazon CloudFront
AWS Black Belt Techシリーズ Amazon CloudFront
Amazon Web Services Japan
Viewers also liked
(9)
Sassを使った共同作業について
Sassを使った共同作業について
gulp勉強会@IVP
gulp勉強会@IVP
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
リクルートの利用事例から考える AWSの各サービスとセキュリティ
リクルートの利用事例から考える AWSの各サービスとセキュリティ
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
AWSでのセキュリティ運用 ~IAM,VPCその他
AWSでのセキュリティ運用 ~IAM,VPCその他
AWSでセキュリティを高める!
AWSでセキュリティを高める!
AWS Black Belt Techシリーズ Amazon CloudFront
AWS Black Belt Techシリーズ Amazon CloudFront
Recently uploaded
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(11)
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
1.
2015年03月08日(日) 宮﨑 優子 Windows環境でSassを使う! Gulp導入のキモ ×
2.
もくじ ● 自己紹介 ● Gulpを入れてみよう! ●
sassを展開してみよう! ● どこでつまづいたのか? ● おわりに
3.
自己紹介 ● 宮﨑優子(みやざきまさこ) ● HTML/CSSコーダー、 jQuery時々PHP ●
WP歴は2年ちょっと、デザインは出来ない ● Schoo「未経験からWebデザイナーに!先輩達が教 える現場のハナシ」配信スタッフ
4.
おことわり ● Sassはあんまり出てきません、ごめんなさい。 ● 今日のお話はWindowsにGulpを入れる所までで す。gulpfile.jsの詳しい書き方などは出てきませ ん、ごめんなさい。
5.
じゃ、node.jsを入れてみよう! ● gulpはnode.jsで動いているので、まずは node.jsをインストールするところから始め ます。 →https://nodejs.org/ INSTALLを クリックします。
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が増えていま す。 ● 実際に見てみましょう~
13.
どこでつまづいたのか ところで、みなさん、黒い画面はお好きですか? 黒い画面が全て悪いとは言いませんが・・・
14.
どこでつまづいたのか ● コマンドライン(命令)を打っていても、何がど う動いているのか理解できなかった ● 調べて出てくる情報を、所々理解できなかった
15.
詳しい人に訊こう ● 生き別れの父(斎木さん)と林先生(WordBench 青山の講師・アドバイザー)がひたすら優しくコ メントを入れてくれたおかげで間違いに気づいた りできました。
16.
おしまい ● ご静聴どうもありがとうございました。 参考にしたサイト ● http://ics-web.jp/lab/archives/3290 ●
http://shared-blog.kddi-web.com/activity/245 ● 父さん(齋木さん)、林先生、みんなありがとう!!
Download now