便利ãªGruntã®å¼±ç‚¹ã‚’補ã†gulp.jsã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨ä½¿ã„æ–¹
詳ã—ãã¯ä¸Šè¨˜é€£è¼‰ã‚’見ã¦ã‚‚らãˆã°åˆ†ã‹ã‚Šã¾ã™ãŒã€Gruntã¨ã¯JavaScriptを使用ã—ã¦Web開発ã«ä¼´ã†ã•ã¾ã–ã¾ãªä½œæ¥ã‚’自動化ã—ã¦åŠ¹çŽ‡è‰¯ãè¡Œã†ãŸã‚ã®ãƒ“ルドツールã§ã™ã€‚ ã“ã®ãƒ„ールã§ã¯ã€Œã‚¿ã‚¹ã‚¯ã€ã¨å‘¼ã°ã‚Œã‚‹ä¸€é€£ã®å‡¦ç†ã‚’è¨å®šãƒ•ã‚¡ã‚¤ãƒ«ã«è¨˜è¿°ã—ã¦ã„ãã¾ã™ã€‚Gruntã®è¨å®šãƒ•ã‚¡ã‚¤ãƒ«ï¼ˆGruntfile.js）ã¯ã€ã‚¿ã‚¹ã‚¯ã«å¯¾ã—ã¦JSONå½¢å¼ã§ãƒ‘ラメーターを指定ã—ã¦ã„ãã®ã§ã™ãŒã€ã“ã“ã§å°‘々å•é¡ŒãŒã‚ã‚Šã¾ã™ã€‚ シンプルãªã‚¿ã‚¹ã‚¯ã§ã‚ã‚Œã°åˆ†ã‹ã‚Šã‚„ã™ã„ã®ã§ã™ãŒã€å¤šãã®æ‹¡å¼µæ©Ÿèƒ½ï¼ˆãƒ—ラグイン）を使用ã—ãŸã‚Šã€ã‚¿ã‚¹ã‚¯ã®åˆ¶å¾¡ã‚’ç´°ã‹ãè¡Œã†å¿…è¦ãŒç”Ÿã˜ãŸãŸã‚Šã—ãŸå ´åˆã€Gruntfileã®è¨˜è¿°é‡ãŒå¢—ãˆã¦å†—é•·ã«ãªã‚Šã€ã‚¿ã‚¹ã‚¯åŒå£«ã®é–¢é€£ã‚„タスク実行çµæžœã‚‚分ã‹ã‚Šã«ãããªã£ã¦ã—ã¾ã„ã¾ã™ã€‚ ãã‚“ãªGruntã®å•é¡Œç‚¹ã‚’解消ã™ã‚‹ã“ã¨ã‚’目的ã¨ã—ã¦é–‹ç™ºã•ã‚ŒãŸã®ãŒã€ä»Šå›žç´¹ä»‹ã™ã‚‹ã€Œgulp.jsã€ï¼ˆä»¥ä¸‹ã€gulp）ã§ã™ã€‚ gulpã¯Gruntを継承ã—ã¤ã¤ã€
Gulp入門 - コーディングを10å€é€Ÿãã™ã‚‹
2. 2 @frontainer Front-end Engineer 林　優一 2014/4 LIG入社 フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ 最近ã¯AngularJSã®å‹‰å¼·ä¼šã«é¡”を出ã—ã¦ã„ã¾ã—㟠ng-mtg#6 - ディレクティブパターン 第１回AngularJS勉強会@LIG ç¾åœ¨ã¯Webサイトを作ã£ãŸã‚Šãƒ†ãƒ³ãƒ—レート作ã£ãŸã‚Š ã„ã‚ã„ã‚ã¨æ´»å‹•ã—ã¦ã„ã¾ã™ã€‚ http://github.com/frontainer Gruntã‹ã‚‰Gulpã«ä¹—ã‚Šæ›ãˆãŸã‚¿ã‚¤ãƒ—ã§ã™
ブラックãªWeb開発ç¾å ´ã®æ•‘世主ã€Gruntã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨ä½¿ã„æ–¹
連載目次 一昔å‰ã§ã‚ã‚Œã°ã€HTMLï¼JavaScriptï¼CSSを使用ã—ã¦Webアプリを作æˆã™ã‚‹å ´åˆã€ï¼ˆç†è€…ã®çµŒé¨“ã§ã¯ï¼‰æ‰€å®šã®ä½ç½®ã«ãƒ•ã‚¡ã‚¤ãƒ«ã‚’ç½®ãã ã‘ã§ã—ãŸã€‚最近ã¯HTMLï¼JavaScriptï¼CSS関連ã®æŠ€è¡“も複雑化ï¼å¤šæ§˜åŒ–ã—ã€ã„ã‚ã„ã‚ãªã“ã¨ã‚’考慮ã—ãªã‘ã‚Œã°ãªã‚Šã¾ã›ã‚“。 例ãˆã°JavaScriptファイルã®å ´åˆã¯ã€ä»¥ä¸‹ã®ä½œæ¥ã‚’è¡Œã†ã“ã¨ã‚‚ã‚ã‚‹ã§ã—ょã†ã€‚ minify（圧縮）やçµåˆ å˜ä½“テストã®å®Ÿè¡Œ JSLint（構文ãƒã‚§ãƒƒã‚¯ï¼‰ã®å®Ÿè¡Œ ã•ã‚‰ã«ã€CoffeeScriptã‚„TypeScriptを使用ã—ã¦ã„ã‚‹å ´åˆã«ã¯ã‚³ãƒ³ãƒ‘イル（JavaScript変æ›ï¼‰ã‚’è¡Œã†å¿…è¦ã‚‚ã‚ã‚Šã¾ã™ã€‚ ã¾ãŸã€SCSS（Sass）やLESSãªã©ã®CSS拡張メタ言語を使用ã—ã¦ã„ã‚‹å ´åˆã«ã‚‚ã€ã‚³ãƒ³ãƒ‘イル（CSS変æ›ï¼‰ä½œæ¥ãŒå¿…è¦ã§ã™ã€‚ ファイルを修æ£ã—ã¦ãƒ“ルドã™ã‚‹ãŸã³ã«ã€ã“れらã®ä½œæ¥ã‚’ã„ã¡ã„ã¡æ‰‹ä½œæ¥ã§è¡Œã£ã¦ã„ã¦ã¯éžå¸¸ã«é¢å€’ã§ã—ょã†
コピペãŒå‡ºæ¥ã‚‹ãªã‚‰èª°ã§ã‚‚出æ¥ã‚‹ã€Web制作タスク自動化ツール「Gruntã€å°Žå…¥æ‰‹é †
ãªã‚“ã ã‹ã€Web制作ã®éš›ã«èµ·ã“る様々ãªé¢å€’ãã•ã„タスクを自動化ã—ã¦ãれるGruntã¨ã„ã†ãƒ„ールãŒã‚るらã—ãã€ç§ã®å‘¨ã‚Šã®Webデザイナーã•ã‚“やコーダーã•ã‚“ãŒã“ãžã£ã¦å°Žå…¥ã•ã‚Œã¦ãŠã‚Šã¾ã—ãŸã€‚ ã¯ã˜ã‚ã¯ã€Œã¸ã‡â€¦ã‚ã¡ãã¯åˆ¥ã«èˆˆå‘³ãªã„ã‹ã‚‰ã„ã„ã§ã‚ã‚Šã‚“ã™ã‚ˆã€ã¨æŒ‡ã‚’ãã‚ãˆã¦å‚観ã—ã¦ã„ãŸã®ã§ã™ãŒã€ä¾¿åˆ©ä¾¿åˆ©ã®å£°ã‚’èžãã«ã¤ã‚Œã‚„ã£ã±ã‚Šç¾¨ã¾ã—ããªã£ã¦ãã¾ã—ãŸã€‚ã ã‹ã‚‰å°Žå…¥ã—ãŸã€‚使ã£ãŸã€‚良ã‹ã£ãŸã€‚ ãã‚“ãªè¨³ã§ä»Šå›žã¯ã€Grunt.jsã®å°Žå…¥ã‹ã‚‰ç°¡å˜ãªä½¿ã„æ–¹ã¾ã§ã‚’紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ç§ã®ã‚ˆã†ãªé»’ã„ç”»é¢ã«æŠµæŠ—ã‚’æŒã£ã¦ã„ã‚‹åˆå¿ƒè€…ã®æ–¹ã§ã‚‚å°Žå…¥ã§ãるよã†ã€ã‚³ãƒ”ペã•ãˆå‡ºæ¥ã‚Œã°GruntãŒä½¿ãˆã‚‹ã‚ˆã†ã«ãªã‚‹è¨˜äº‹ã«ã—ã¦ã‚ã‚‹ã¤ã‚‚ã‚Šã§ã™ã€‚ ãªãŠã€ä»Šå›žå°Žå…¥ã—ãŸç§ã®PC環境ã¯OS X 10.9.1ã§ã™ã€‚Windowsã§ã®å°Žå…¥æ‰‹é †ã¯ä»Šæ›´ã ã‘ã©ã‚„ã‚‹grunt入門編・インストールã‹ã‚‰åŸºæœ¬çš„ãªä½¿ã„方｜WEB Drawerã‚’ã”覧下ã•ã„。 Gruntã§ä½•ãŒ
Web デザイナーã•ã‚“å‘ã‘ Grunt を使ã£ãŸ コーディング作æ¥ã®åŠ¹çŽ‡åŒ–ã€ã¯ã˜ã‚ã®ä¸€æ© | WWW WATCH
フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®é–‹ç™ºã‚’色々ã¨æ—らã›ã¦ãれる Grunt ã«ã¤ã„ã¦ã€åˆã‚㦠Grunt を使ã†ãªã‚‰ã“ã‚Œã ã‘ã¾ãšã¯ã‚„ã£ã¦ã¿ãŸã‚‰ï¼Ÿ ã¨ã„ã†å…¥é–€çš„ãªè§£èª¬è¨˜äº‹ã‚’書ã„ã¦ã¿ã¾ã—ãŸã€‚ ã“ã®è¨˜äº‹ã¯å…¬é–‹ã‹ã‚‰ã‹ãªã‚Šã®æ™‚é–“ãŒçµŒéŽã—ã¦å†…容ãŒå¤ã„ã®ã¨ã€Gulp を使ã£ãŸãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºç’°å¢ƒæ§‹ç¯‰ã«ã¤ã„ã¦æ–°ã—ã„記事 「Web サイト作るãŠä»•äº‹ã‚’ã—ã¦ã„る人å‘ã‘ Gulp ã§ä½œã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºç’°å¢ƒã€ を書ã„ã¦ã„ã¾ã™ã®ã§ãã¡ã‚‰ã‚’ã”覧ãã ã•ã„。 Grunt ã®å°Žå…¥è¨˜äº‹ãªã‚“ã‹çã—ãã‚‚ãªã„ã—ã€è‰²ã€…ãªæ–¹ãŒã‚ã‹ã‚Šã‚„ã™ã„記事をéŽåŽ»ã«ã‚‚書ã‹ã‚Œã¦ã„ã¦ã„ã‚‹ã®ã§ä»Šã•ã‚‰ã§ã¯ã‚ã‚Šã¾ã™ãŒ...... ã¨ã¯ã„ãˆã€ã¾ã 使ã£ãŸã“ã¨ãŒãªã„人もã„ã‚‹ã ã‚ã†ã¨ã„ã†ã“ã¨ã§ã€ã€ŒGrunt ã£ã¦ä½•ã§ã™ã‹ï¼Ÿã€ ã¨ã‹ã€Œä½¿ã£ã¦ã¿ãŸã„ã‘ã©ã‚ˆãã‚ã‹ã‚‰ãªã„......〠ãªã‚“ã¦ã„ㆠWeb デザイナー （主㫠HTML ã‚„ CSS を書ãフãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ãªäººï¼‰ ã•ã‚“å‘ã‘ã«ã€åˆã‚ã¦
2013å¹´Web制作ã«ä½¿ã„始ã‚ã¦ã‚ˆã‹ã£ãŸãƒ„ール・サービスã¾ã¨ã‚ 〜ãã—ã¦æ™‚ã¯2014å¹´ã¸ã€œ
2013å¹´Web制作ã«ä½¿ã„始ã‚ã¦ã‚ˆã‹ã£ãŸãƒ„ール・サービスã¾ã¨ã‚ 〜ãã—ã¦æ™‚ã¯2014å¹´ã¸ã€œ 2013.12.19 | ã“ã®æ–¹æ³•ãŠå‹§ã‚ã§ã™ï¼ | åˆå¿ƒè€…å‘ã‘ | 制作ã‚ã‚‹ã‚ã‚‹ 皆様ã—ã‚ã£ã™ã€‚WP-Dã§ã¯ã‚¸ãƒŸãƒ¼ãªæŠ€è¡“系記事を書ã„ã¦ã¾ã™ã‚¨ãƒ¡ãƒ©ãƒ«ãƒ‰ã“ã¨äº•æ‘ã§ã™ã€‚ パープルリーダーã‹ã‚‰ã€Œã‚†ãå¹´ãã‚‹å¹´ã€ã¨ã„ã†ãŠé¡Œã‚’ã„ãŸã ãã¾ã—ã¦ã€ãŸã¾ã«ã¯ã¾ã¨ã‚記事的ãªã‚‚ã®ã‚’書ã„ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ 日々新技術ã«çŒ›é€²ã™ã‚‹çŒ›ç‰›ã®ã‚ˆã†ãªåˆ¶ä½œè€…ã®çš†æ§˜ã«ã¯å½¹ã«ç«‹ãŸãªã„記事ã ã¨æ€ã†ã®ã§ã€æ—¥æœ¬é…’ã§ã‚‚ãŸã—ãªã¿ãªãŒã‚‰ãã‚‹ãるスクãƒãƒ¼ãƒ«ã—ã¦ã„ãŸã ã‘ã‚Œã°ã“れ幸ã„ã§ã‚ã‚Šã¾ã™ã€‚ 個人的ãªè©±ã«ãªã‚Šã¾ã™ãŒ2013å¹´3月ã«ç‹¬ç«‹ã—ã¾ã—ã¦ã€åˆ¶ä½œç’°å¢ƒãªã©ã‚‚自分ã®å¥½ããªç‰©ã‚’使ã†ã“ã¨ãŒã§ãるよã†ã«ãªã‚Šã¾ã—ãŸã€‚ã¾ãŸãƒ•ãƒªãƒ¼ãƒ©ãƒ³ã‚¹ã«ã¨ã£ã¦ã¯ä½œæ¥åŠ¹çŽ‡ãŒè‡ªåˆ†ã®æ‰‹å–ã‚Šã«ç›´çµã™ã‚‹ã®ã§ã€ä½œæ¥ã®è‡ªå‹•åŒ–・効率化ã¯æ»æ´»å•é¡Œã§ã‚‚ã‚ã‚Šã¾ã™ã‚ˆã。 紹介ã—ã¦ã„るツールやサービスã¯2013
CSSãƒã‚¹ãƒˆãƒ—ãƒã‚»ãƒƒã‚µãƒ¼æ™‚代ã®åˆ°æ¥
Sassã‚„LESSã¨ã„ã£ãŸCSSプリプãƒã‚»ãƒƒã‚µãƒ¼ã¯å¸‚民権を得ãŸã¨è¨€ã£ã¦è‰¯ã„ã¨æ€ã†ã€‚ã—ã‹ã—ãれらCSSプリプãƒã‚»ãƒƒã‚µãƒ¼ã¯é–‹ç™ºã¨ã„ã†æ®µéšŽã«ã®ã¿åˆ©ã‚’ã‚‚ãŸã‚‰ã™ã‚‚ã®ã§ã€ä»Šã®ã¨ã“ã‚ã¯ãれ以上ã§ã¯ãªã„。CSSを実際ã«ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«å±Šã‘ã‚‹ã¾ã§ã«ã¯ã€é–‹ç™ºã ã‘ã§ã¯ãªãレビューã¨ãƒªãƒªãƒ¼ã‚¹ã¨ã„ã†æ®µéšŽã‚‚ã‚る。レビューã¨ãƒªãƒªãƒ¼ã‚¹ã‚‚確実性をæŒã£ã¦åŠ¹çŽ‡çš„ã«è¡Œã†ãŸã‚ã«ã¯ã€CSSãƒã‚¹ãƒˆãƒ—ãƒã‚»ãƒƒã‚µãƒ¼ã¨ç·ç§°ã•ã‚Œã‚‹ã‚ˆã†ãªãƒ„ール群ãŒå¿…è¦ã«ãªã‚‹ã ã‚ã†ã€‚ ã“ã®æ–‡æ›¸ã¯Frontrend Advent Calendar 2013ã®4日目ã¸ã®è¨˜äº‹ã¨ã—ã¦å¯„稿ã—ãŸã€‚明日ã¯@hilokiã•ã‚“ãŒã‚¹ã‚¿ã‚³ãƒ©ã‚µãƒƒã‚µã¨æ›¸ãよã†ã 。 目次 CSSãƒã‚¹ãƒˆãƒ—ãƒã‚»ãƒƒã‚µãƒ¼ã¨ã¯ CSSプリプãƒã‚»ãƒƒã‚µãƒ¼ã®å‡ºåŠ›ã™ã‚‹CSS CSS Lint 開発用ã¨ãƒ¬ãƒ“ュー用ã€ãƒªãƒªãƒ¼ã‚¹ç”¨ã®CSS CSSãƒã‚¹ãƒˆãƒ—ãƒã‚»ãƒƒã‚µãƒ¼ã®ãƒ¦ãƒ¼ã‚¹ã‚±ãƒ¼ã‚¹ ベンダー拡張プリフィックスã®ä»˜åŠ Media Queries
今ã©ãã®Gruntを使ã£ãŸãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºï¼ˆHTML/CSS編） - MOL
Sassãªã©ã®CSSプリプãƒã‚»ãƒƒã‚µã‚’使ã†WebデザイナãŒå¢—ãˆã¦ãã¾ã—ãŸã€‚Sassをコンパイルã™ã‚‹ã ã‘ãªã‚‰é»’ã„ç”»é¢ï¼ˆã‚¿ãƒ¼ãƒŸãƒŠãƒ«ï¼‰ã‚’使ã‚ãšã¨ã‚‚GUIアプリã‹ã‚‰ã®åˆ©ç”¨ã§å•é¡Œã‚ã‚Šã¾ã›ã‚“。ãŒã€ã“ã“ã¯ä¸€æ©è¸ã¿è¾¼ã‚“ã§Grunt（JavaScript製ã®ã‚¿ã‚¹ã‚¯ãƒ©ãƒ³ãƒŠãƒ¼ï¼‰ã‚’使ã£ã¦ã€Sass以外ã®ã‚³ãƒ³ãƒ‘イルやライブリãƒãƒ¼ãƒ‰ã€ç”»åƒæœ€é©åŒ–ã€CSSã®ãƒªãƒ³ãƒˆã‚„スタイルガイド生æˆãªã©ã€ã‚らゆる作æ¥ã‚’Gruntã«ä»»ã›ã¦ã‚ˆã‚ŠåŠ¹çŽ‡çš„ãªé–‹ç™ºç’°å¢ƒã‚’手ã«å…¥ã‚Œã¦ã¿ã¾ã›ã‚“ã‹ã€‚ ã©ã‚‚ã€Front-end Developerã‚’ã—ã¦ãŠã‚Šã¾ã™@t32kã§ã™ã€‚今日ã¯ãŒã‚“ã°ã‚Šã¾ã™ã€‚ Frontrendã¨ã„ã†ã‚³ãƒŸãƒ¥ãƒ‹ãƒ†ã‚£æ´»å‹•ã‚’ã—ã¦ã„ã¾ã™ã€‚通常ã¯æ±äº¬ã§3~4ヶ月ã®å‘¨æœŸã§ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚’テーマã«ã—ãŸå‹‰å¼·ä¼šã‚’開催ã—ã¦ã„ã¾ã™ã€‚良ã‹ã£ãŸã‚‰ã¿ãªã•ã‚“ã‚‚ã”å‚åŠ ãã ã•ã„ã¾ã›ã€‚ Agenda 今日ã®è©±ã™å†…容ã¯ä»¥ä¸‹ã®ã¨ãŠã‚Šã§ã™ã€‚ ãªãœGruntを使ã†ã®ï¼Ÿ Gruntã®ä½¿
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
最近ã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ãƒ„ールã®ç´¹ä»‹
http://toybox-design.net/?p=664
Rapid build Wedsite wireframe. Foundation Sass Compass Grunt Github
{{#tags}}- {{label}}
{{/tags}}