Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ããã«ã¡ã¯ï¼ã®ã£ã¶ãªã¼ã§éçºãæ å½ãã¦ããæå¡ï¼ inureoã§ãã ä»åã¯ã¿ã¤ãã«éãwebpack + babel-loaderã§ES6ããã¥ã¼ãã¤ã¤ãgulpãES6ã§æ¸ããã¨ããã¨ããããã£ã¦ã¿ããã¨æãã¾ãã gulpfile.jsãES6ã§æ¸ããã¨æã£ãçç± ãES6ãããããªã¼ããããæ¥åã«ç´çµããã¨ããã§ããã¨èãã¦ããæã«ããã¡ãã®è¨äºã®gulpfile.js ãES6ã§æ¸ãçç±ãæè¦ãã¦ããããã«gulpfileãªãå®è£ ã«é 使ããªããæ £ããã®ã«ã¯ããã¿ãªã ï¼ãã¨æã£ãããã§ãã æ©éES6ã§gulpfileãæ¸ãã¦ãã gulpfileãES6ã§æ¸ãã«ã¯ãgulpå´ã§ES6対å¿ãããããnode.jså´ã§ES6対å¿ããããã®2æã«ãªãã¾ãã gulpå´ã§ã®å¯¾å¿ gulpã®3.9.0ããbabelãæ¨æºãµãã¼ãããããã«ãªãã¾ããããã¡ã¤ã«åãgulpfile.babel.
æ¦è¦ Electronã¨ã¯ãJavaScriptã§ãã¹ã¯ãããã¢ããªãä½ãããã¼ã«ã§ãã 詳ããã¯ååã®è¨äºã30åã§åºæ¥ããJavaScript (Electron) ã§ãã¹ã¯ãããã¢ããªãä½ã£ã¦é å¸ããã¾ã§ããã覧ãã ãã ããã¾ã§ã¯Electronã使ã£ãã¢ããªéçºæ¹æ³ã«ã¤ãã¦æ¸ãã¦ãã¾ããã ä»åã¯ã³ã¼ããã¬ãªã¬ãªæ¸ãã¦ããåã«ãéçºç°å¢ãæ´ãããã¨æãã¾ãã ä»åã¯Electronã®éçºã ES6 + React ã§ãããã¨æãã¾ããã ãã®ããã®éçºç°å¢ã gulp + babel ã使ã£ã¦æ´ãã¦ããã¾ãã ãã®è¾ºãã¯ä»ã®è¨äºãããªãåèã«ãã¾ãããæ¢ã«åããããªãã¨ããã£ã¦ããæ¹ãããããããã£ãããã¾ãããå人çãªã¡ã¢ãå ¼ãã¦ã¾ã¨ãã¾ãã åèè¨äº ã¼ãã®ããããããããããã®Electron ä½ããããã ã¾ãã¯ä½ããããããã¨ããã¨ãããã話ãã¾ãã JavaScrip
ããããããçæ§ãç²¾ç¥ãå£ãã¦ãã¾ãä¼è·ä¸ã® erukiti ã§ããã第2ã®ãã¯ã³ã´ Advent Calendar 2015 - Qiita ã®ç¬¬20æ¥ç®ã5æ¥ã»ã©é ãã¦ãéããã¾ããé ãã¦ãã¿ã¾ããã erukiti/rize-filer ä»åã®è¨äºã¯â¦ ãã¦ãElectronã®è§£èª¬è¨äºã¯å²ã¨å¤ãã§ãããã¡ããã¨ä½¿ããã¢ããªãä½ãããã«å¿ è¦ãªæ å ±ã¯è²ã æ£ãã°ã£ã¦ãã¾ããããã§ä»åã¯ãªã¼å 輩ï¼ã·ã£ãã¡ããã¨ä¸ç·ã«ä¸ã¤ä¸ã¤ããããè¦ã¦ããã¾ãããããã¡ãã風å³ã®æ¸ãæ¹ã§ããå 容ã¯æ®éã«Electronã®è¨äºã§ãã Electronã«èå³ãããããã©ããç¥ããªãæ¹ã¯ 第8ç¾½ ãã©ã³ã¹ãã¢ã¬ã³ããã¬ã¤ã³ã°ã»ãã¬ã¤ã¤ã¼ã¹ãã¼ãªã¼ (ãã¡ãã Advent Calendar 2015) - Qiita ãã¾ãã¯ãèªã¿ãã ãããElectron ã§ã¡ãã£ã¨ããåç»ãã¬ã¤ã¤ã¼ãä½ã£ã¦ã¿ãã¨ããè¨äºã§ã
å°ããã¢ããªã±ã¼ã·ã§ã³ãªããstyleã¯å¤æ´ããã度ã«æ¯åãã«ãã«ããã¦ãã¾ã£ã¦ã1sãããããªããããããªãã ããã大ãããªã£ã¦ã5s以ä¸ãããã¨é常ã«è¦çã ã ã¨ããããã§å·®åãã«ããããã Sassã®å·®åãã«ãã§åé¡ã«ãªãã㨠差åãã«ãèªä½ã¯ç°¡åã§ãgulp-cachedã¨ãã使ãã°ãååã¨å·®åããããã®ã ãããã«ãã§ããã ãªãã ãã©ããã®å ´åã«åé¡ã«ãªãã®ãsassã®ä¾åé¢ä¿(@import)ã®è§£æ±ºã ã åç´ã«å·®åã®ãã£ããã¡ã¤ã«ããã«ãããã ãã ã¨ã@importå ã辿ããªãã ããããã¨@importå ã®ãã¡ã¤ã«ãå¤æ´ã«ã¤ãã¦ããªãã ãããã§ãnode-sassã®watchãªãã·ã§ã³ã£ã¦@importå 辿ã£ã¦ãããªãããã£ã¦ã©ããªã£ã¦ããã ï¼ï¼ ã¨æã£ã¦å®è£ ãè¦ã¦ã¿ãããsass-graphã¨ããnpmã使ã£ã¦è¾¿ã£ã¦ããã ãããã使ãã°å·®åãã«ãæã«ä¾åé¢ä¿ã®è§£æ±ºãã§
webpack ã¨ã¯ webpack 㯠WebApp ã«å¿ è¦ãªãªã½ã¼ã¹ã®ä¾åé¢ä¿ã解決ããã¢ã»ããï¼é å¸ç©ï¼ãçæãããã«ããã¼ã«ï¼è¦ããã«ã³ã³ãã¤ã©ï¼ã§ããJavaScript ã ãã§ãªããCoffeeScript ã TypeScriptãCSS ç³»ãç»åãã¡ã¤ã«ãªã©ãæ±ããã¨ãã§ãã¾ãã WebApp ã®ãã«ããã¼ã«ã¯ Grunt ã Gulp ãæåã§ãããããã¯åºæ¬çã«ããã«ãæé ãã¿ã¹ã¯ã¨ããå½¢ã§èªãå®ç¾©ããå¿ è¦ããããããã³ãã¨ã³ãéçºã«é¦´æã¿ã®ãªãéçºè ã«ã¨ã£ã¦ã¯æ·å± ãé«ããã®ã§ããï¼å°ãªãã¨ããèªåã¯ããã§ããï¼ã webpack ã使ãã°ãGrunt ã Gulp ãå¿ è¦ããã¾ããï¼è¦ããã¹ããã¨ã¯ã»ã¨ãã©ããã¾ãããï¼å¿ è¦ãªãï¼ç°¡åãªè¨å®ãã¡ã¤ã«ãæ¸ã㦠webpack ã³ãã³ããå®è¡ããã ãã§ãã 以ä¸ã§ã¯åºæ¬çãªä½¿ãæ¹ãè¦ã¦ããã¾ãã â»ãã¡ãã Grunt/G
ã¡ãã£ã¨ãã¼ã¸ã§ã³ã¢ãã http://qiita.com/koh110/items/f6ecbdc03093675a9527 èªåãªãã«ä½¿ããããããã³ãã¨ã³ãã®éçºç°å¢ãæ´ãã¦ä½¿ã£ã¦ããããã©ãã ãã ãæ代ã®æµãã«ããããªãç®æãåºã¦ããã®ã§ãã®é¨åãæ¸ãæãã¦ã¢ãããã¼ããã¦ã¿ãã http://qiita.com/koh110/items/9c750fb67e40481e52cd æã®ãã¼ã¸ã§ã³ã¯v1.0.0ã¨ãããã©ã³ãã«åãåºã https://github.com/koh110/minjsapp ããããã® gulp-load-plugins run-sequence bower ã¢ã¸ã¥ã¼ã«ãã©ã¤ãã©ãªã¸ã®ä¾å度ãä¸ãããã£ã å¤æ´ãããã® gulp-babel -> webpack + babel-loader requireãããã£ã 追å ãããã® sassã³ã³ãã« çc
npm ã¯ããã±ã¼ã¸ä¾å管çãã¼ã«ã§ããã¨åæã«ã便å©ãªã¿ã¹ã¯ã»ã©ã³ãã¼ã§ãã æ¬ä½ã¯ããåºç¤çãªæ©è½ã ããæã¡ãnpm ã管çããããã±ã¼ã¸ã¨ Shell ã®åãçµã¿åããã¦ã¿ã¹ã¯ãå®ç¾©ãã¾ãããnpm-scripts ã§å©ç¨ãã CLI ã³ãã³ã㯠npm ã§ç®¡çã§ãããã¨ããåããããããæ°ã«å ¥ã£ã¦ãã¾ãã npm-scripts ã«ã¯ä»¥ä¸ã®ç¹å¾´ãããã¾ãã å¤ãã®ãã¼ã«ã CLI ãæã£ã¦ããããã«ã©ããã¼ãã©ã°ã¤ã³ãä¸è¦ã§ããGulp ã©ããã¼ ãã©ã°ã¤ã³ã¯éå ¬å¼ã§ãããã¨ãå¤ããã¡ã³ããã³ã¹ãç¶ç¶ãããä¸å®ãªå ´åãããã¾ãã ç°¡æ½ã§ããGulp ã§æ¸ãã¨æ°åè¡ã ã£ãå¦çãæ°è¡ã«ãªããªãã¦ãã¨ãããããã¾ãã è¤éãªãã¨ãããã«ã¯åãã¦ããªãã§ãã ç°å¢å¤æ°ã®æ±ãã«é£ãããã¾ãã ãã®è¨äºã§ã¯ãç§ã npm-scripts ãæ¸ãã¨ãã«ããå©ç¨ãã¦ãã便å©ãã¼ã«ãã¡ãç´¹ä»ãã¾ãã
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python hoge.js ã minify ãããã¡ã¤ã«ã hoge.min.js ã¨ã㦠åºåããæ¹æ³ã§ã. gulp-rename ã£ã¦ãã¤ã使ãã¾ã. æ¡å¼µåã .js ãã .min.js ã«å¤æãã gulp-rename ã¨ããã¿ã¹ã¯ã使ãã¾ã. ä¸è¨ã³ãã³ãã§ã¤ã³ã¹ãã¼ã«ã§ãã¾ã. $npm install --save-dev gulp-rename ã¤ãã§ã« uglify ã $npm install --save-dev gulp-uglify ãã¨ã¯ gulpfile.js ã«ä¸è¨ã®ãããªã¿ã¹
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? gulpã§ä½¿ããã©ã°ã¤ã³ãnpmã¢ã¸ã¥ã¼ã«ãããã¯ã¢ãã æ´æ°å±¥æ´ 2016-03-11 æ´æ° 2014-07-25 gulp-bower-files ãdeprecateããã¦ããã代æ¿ã¯ main-bower-files 2014-07-24 gulp-connect ãdeprecateãããã代æ¿ã¯å¾ç¶ã® gulp-webserver 2014-06-29 gulp-clean ã®ç®æãä¿®æ£ï¼shinnnæ§ã«ãææããã ãã¾ãããæè¬ï¼m(_ _)mï¼ ãã©ã°ã¤ã³ ä»ã¯ä½¿ããªãæ¹ãè¯ããã©ã°ã¤ã³ãªã¹ã - gulpjs/plug
æ®éã«ä½¿ãåã«ã¯å ¨ãå°ããªãã»ã©ã®æ°ã®ãã©ã°ã¤ã³ãGulpã«ã¯ããã¾ãã Githubã§ã®staræ°ãããæãããªããã«ãGoogleã®WenStarterKitã§ãGulpãæ¡ç¨ããããªã©ã注ç®åº¦ã¯ã¾ãã¾ãé«ããªã£ã¦ãã¾ãã Gruntã¨ã®æ¯è¼ Gruntã¨æ¯è¼ãã¦ã®ã¡ãªããã»ãã¡ãªããã¯ä»¥ä¸ã®ããã«ãªãã¾ãã ã¡ãªãã Gruntããè¨å®ãã¡ã¤ã«ãè¨è¿°ãããã StreamAPIãå©ç¨ãããã¨ã§ãã¡ã¤ã«ãæ¯åæ¸ãåºãGruntããé«éã§ã¨ã³ ãã¡ãªãã è¨è¿°ãããNodeã«è¿ããªããããè¤éãªãã¨ã¯æ·å± ãããé«ã ãã©ã°ã¤ã³éçºã®ããã®ããã¥ã¡ã³ããå°ãªã ä»æ¥ã®ã´ã¼ã« Gulp.jsã使ã£ã¦ã³ã¼ãã£ã³ã°ä½æ¥ã10åéãããï¼ ãããªç°å¢ãä½ãããã¨æãã¾ãã 1. Node.jsãã¤ã³ã¹ãã¼ã« ã¾ãã¯Node.jsãã¤ã³ã¹ãã¼ã«ãã¾ãããã Node.js http://nodejs
gulp-sassã¨gulp-postcssãçµã¿åãããã¨ãå¿«é©ãªCSSã®ã³ã³ãã¤ã«ç°å¢ãå®ç¾ã§ãã¾ãã Sassã®ã³ã³ãã¤ã«ã¯gulp-sassã§è¡ãããã¹ãããªã»ããµã¼ã§ããgulp-postcssã«ãã®å¾ã®å¦çãé£æºãããã¤ã¡ã¼ã¸ã§ãã â»ãã®ã¨ã³ããªã¼ã¯å½åãgulp-sassã¨gulp-cssnextã§å¿«é©ã³ã³ãã¤ã«ç°å¢ãæ§ç¯ãã¨ããã¿ã¤ãã«ã§å ¬éãã¦ãã¾ããããgulp-cssnextãéæ¨å¥¨ãã©ã°ã¤ã³ã¨ãªããPostCSSã使ã£ãããæ¹ã主æµã«ãªã£ã¦ãããããgulp-postcssãç¨ããå 容ã«å ¨é¢çã«ä¿®æ£ãã¾ããã åºç¤ç¥è gulp-sassã«ã¤ã㦠gulpã§Sassã®ã³ã³ãã¤ã«ãè¡ãnpmããã±ã¼ã¸ã§ãã libsassã使ã£ã¦ãããããgulp-ruby-sassãgulp-compassã¨æ¯ã¹ã¦å¦çãé«éã§ã Rubyã«ä¾åããªãããç°å¢ã®æ§ç¯ã»å ±æããããã
ã¿ã¹ã¯ç®¡ç package.json ã«ã¯ããã±ã¼ã¸ã®ä¾åãæ¸ã㦠npm install ããã®ãåºæ¬ã ãã©ã ã¿ã¹ã¯ã®ç®¡çãã©ããããã¨ããã®ã¯ãå¥éã¾ãèããªãã¨ãããªãã èªå㯠gulp ãè¯ãã¨æã£ã¦ãããã grunt ã jake ã make ã使ã人ãããã ã¾ãããããããªãã·ã§ã³ãã¤ããã°ã»ã¼ä¸ã¤ã®ã¿ã¹ã¯ãå®è¡ã§ãã¦ãã¾ã browserify, jsh/eslint, mocha ãªã©ã®ã³ãã³ããæä¾ãããã¼ã«ãããã ããã¦ã npm ã«ãä¸é¨ãããããµãã¼ããã npm run æ©è½ãããã®ã§ãããã« Unix ã¯ã³ã©ã¤ãã¼ãæ¸ããã¨ãã§ããã ä»åã¯ããã©ã®ã¿ã¹ã¯ãã¼ã«ãæè¯ããã¿ãããªè©±ã§ã¯ãªããããããã©ããã£ã¦å®è¡ããããã¾ã㯠npm ã¨ã®æ£²ã¿åãã¨ãæ§æã®æµåã«ã¤ãã¦ãæè¿è¯ãã¨æã£ã¦ããããæ¹ã«ã¤ãã¦æ¸ãã¦ããã åæ¹éã§åé¡ç¹ãæ¸ãã¦ãããã
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}