{"id":1847,"date":"2015-03-08T10:03:13","date_gmt":"2015-03-08T01:03:13","guid":{"rendered":"http:\/\/uda2.com\/blog\/?p=1847"},"modified":"2018-10-31T00:56:15","modified_gmt":"2018-10-30T15:56:15","slug":"prepros-sass-uglify","status":"publish","type":"post","link":"https:\/\/uda2.com\/blog\/prepros-sass-uglify\/","title":{"rendered":"Prepros\u304c\u6709\u6599\u5316\u3057\u305f\u306e\u3067\u4e57\u308a\u63db\u3048\u305f"},"content":{"rendered":"

Prepros<\/a>\u304c\u6709\u6599\u5316\u3057\u305f\u3088\u3046\u3067\u8d77\u52d5\u306e\u5ea6\u306b\u300c\u91d1\u6255\u3048\u300d\u3001\u5b9a\u671f\u7684\u306b\u300c\u91d1\u6255\u3048\u300d\u3068\u3046\u308b\u3055\u304f\u306a\u308a\u3001\u66b4\u8d70\u3059\u308b\u983b\u5ea6\u304c\u5897\u3048\u305f\u3002
\n\u4f7f\u7528\u983b\u5ea6\u306f\u9ad8\u304f\u306a\u3063\u3066\u308b\u306e\u3067\u91d1\u3092\u6255\u3063\u3066\u3082\u3044\u3044\u30ec\u30d9\u30eb\u304b\u3082\u3057\u308c\u306a\u3044\u3051\u3069\u3001\u8d85\u591a\u6a5f\u80fd\u306aPrepros\u306eSCSS\u3068javascript\u6700\u5c0f\u5316\u306b\u3057\u304b\u4f7f\u3063\u3066\u7121\u304f\u640d\u3057\u305f\u6c17\u5206\u306b\u306a\u308b\u306e\u3067\u4e57\u308a\u63db\u3048\u308b\u3053\u3068\u306b\u3057\u305f\u3002
\n\u304b\u3068\u3044\u3063\u3066Windows\u306a\u306e\u3067\u4e57\u308a\u63db\u3048\u5148\u304c\u5c11\u306a\u3044\u3002\u4ee5\u524d\u306fSCOUT\u3092\u4f7f\u3063\u3066\u3044\u305f\u304c\u6700\u8fd1\u4eba\u6c17\u304c\u7121\u3044\u3088\u3046\u306a\u306e\u3067\u3001\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u5f0f\u306e\u30b3\u30f3\u30d1\u30a4\u30e9\u30fc\u3092\u4f7f\u3046\u3053\u3068\u306b\u3057\u305f\u3002
\n
\n\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u5f0f\u306eSASS\u306fruby\u3067\u52d5\u3044\u3066\u308b\u306e\u3067\u3001\u307e\u305aruby\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30ebRubyInstaller for Windows<\/a>\u306b\u30667-zip\u7248\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u89e3\u51cd\u3001\u5834\u6240\u306f\u4f55\u51e6\u3067\u3082\u3044\u3044\u304c\u3001\u3044\u3064\u304b\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u3057\u3066\u4f7f\u3046\u304b\u3082\u3057\u308c\u306a\u3044\u306e\u3067xamp\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u300cruby\u300d\u3068\u3044\u3046\u30d5\u30a9\u30eb\u30c0\u540d\u3067\u914d\u7f6e\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u3001\u30b7\u30b9\u30c6\u30e0\u306e\u74b0\u5883\u5909\u6570\u306ePath\u306b\u300cC:\\xampp\\ruby\\bin\u300d\u3092\u8ffd\u52a0\u3057\u3066\u306b\u30d1\u30b9\u3092\u901a\u3059\u3002
\n\u78ba\u5b9f\u306b\u53cd\u6620\u3055\u305b\u308b\u70ba\u518d\u8d77\u52d5\u3059\u308b\u3002
\n\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u30d1\u30b9\u304c\u901a\u3063\u3066\u308b\u304b\u78ba\u8a8d<\/p>\n

> ruby -v\r\nruby 2.2.1p85 (2015-02-26 revision 49769) [x64-mingw32]<\/code><\/pre>\n
ruby\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0gem\u3067sass\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u304c\u3001gem\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3059\u308b\u3002
\n\u30a6\u30c1\u306e\u5834\u54082.4.5\u304b\u30892.4.6\u306b\u306a\u3063\u305f\u3002<\/p>\n
> gem -v\r\n2.4.5\r\n> gem i rubygems-update\r\n> update_rubygems\r\n> gem pristine --all\r\n> gem -v\r\n2.4.6<\/code><\/pre>\n
SASS\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3002\u540c\u6642\u306bSCSS\u3067\u3082\u5229\u7528\u51fa\u6765\u308b\u3088\u3046\u306b\u306a\u308b\u3002<\/p>\n
> gem install sass\r\n> sass -v\r\nSass 3.4.13 (Selective Steve)\r\n> scss -v\r\nSass 3.4.13 (Selective Steve)<\/code><\/pre>\n
\u6b21\u306bSASS\u306b\u30d5\u30a9\u30eb\u30c0\u3092\u76e3\u8996\u3059\u308b\u306b\u306f\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u4efb\u610f\u306eWEB\u30eb\u30fc\u30c8\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u3066<\/p>\n
> sass --watch css --style compact --sourcemap=none --cache-location %USERPROFILE%\/.sass-cache<\/code><\/pre>\n
\u3068\u6253\u3061\u8fbc\u3081\u3070\u76e3\u8996\u304c\u30b9\u30bf\u30fc\u30c8\u3057\u3001\u300cCtrl\uff0bC\u300d\u3067\u505c\u6b62\u3059\u308b\u3002
\n\u30b3\u30de\u30f3\u30c9\u306f
\n–watch css<\/strong>\u306f\u76e3\u8996\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u540d\u306e\u6307\u5b9a\u3067\u3001\u79c1\u306e\u5834\u5408\u5165\u529b\u30d5\u30a9\u30eb\u30c0\u3082\u51fa\u529b\u30d5\u30a9\u30eb\u30c0\u3082\u540c\u3058\u306a\u306e\u3067\u4e00\u3064\u3060\u3051\u3069\u5206\u3051\u3066\u308b\u4eba\u306fscss:css\u3068\u3044\u3046\u611f\u3058\u306b\u5165\u529b\u30d5\u30a9\u30eb\u30c0\u3068\u51fa\u529b\u30d5\u30a9\u30eb\u30c0\u3092\u30b3\u30ed\u30f3\u3067\u533a\u5207\u308c\u3070OK\u3060\u3057\u3001scss\u30d5\u30a1\u30a4\u30eb\u304c\u4e00\u3064\u3057\u304b\u7121\u3044\u5834\u5408\u306f\u300cstyle.scss:style.css\u300d\u3068\u3044\u3046\u98a8\u306b\u30d5\u30a1\u30a4\u30eb\u540d\u3092\u6307\u5b9a\u3059\u308b\u4e8b\u3082\u51fa\u6765\u308b\u3002
\n–style compact<\/strong>\u306e\u90e8\u5206\u306f\u5727\u7e2e\u65b9\u6cd5\u3067nested\u3001expanded\u3001expanded\u3001compressed\u306e\u9806\u306b\u30b3\u30f3\u30d1\u30af\u30c8\u306b\u306a\u308b\u3002
\n–sourcemap=none<\/strong>\u306f\u6700\u8fd1\u306eSass\u306fSource Maps\u3068\u3044\u3046\u30c7\u30d0\u30c3\u30b0\u7528\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u81ea\u52d5\u3067\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u306fFirefox\u306eFirebug\u3084Chrome\u306eDeveloper Tools\u3067\u300cCSS\u306e\u884c\u6570\u8a00\u308f\u308c\u3066\u3082\u300d\u3063\u3066\u6642\u306bSCSS\u306e\u884c\u6570\u3092\u8868\u793a\u3057\u3066\u3082\u3089\u3048\u308b\u3088\u3046\u306b\u76ee\u6b21\u304c\u66f8\u304b\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3001\u4eca\u56de\u306f\u5c0f\u898f\u6a21\u30b5\u30a4\u30c8\u3067\u5225\u306b\u3044\u3089\u306a\u3044\u306e\u3067none\u3092\u6307\u5b9a\u3057\u3066\u751f\u6210\u3057\u306a\u3044\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002
\n–cache-location %USERPROFILE%\/.sass-cache<\/strong>\u306fSASS\u304c\u30b3\u30f3\u30d1\u30a4\u30eb\u3092\u9ad8\u901f\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u751f\u6210\u3055\u308c\u308b\u300c.sass-cache\u300d\u30d5\u30a9\u30eb\u30c0\u306e\u5834\u6240\u3092\u8a2d\u5b9a\u3059\u308b\u3002\u3053\u306e\u5834\u5408\u306f\u30e6\u30fc\u30b6\u30fc\u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\u30d5\u30a9\u30eb\u30c0\u306b\u307e\u3068\u3081\u308b\u611f\u3058\u306b\u306a\u3063\u3066\u308b\u3002\uff08\u3082\u3057\u3082\u8907\u6570\u30b5\u30a4\u30c8\u3092\u904b\u55b6\u3057\u3066\u3044\u3066\u3082\u300c.sass-cache\u300d\u30d5\u30a9\u30eb\u30c0\u5185\u306b\u30cf\u30c3\u30b7\u30e5\u540d\u306e\u30d5\u30a9\u30eb\u30c0\u304c\u4f5c\u3089\u308c\u308b\u306e\u3067\u91cd\u8907\u3059\u308b\u5fc3\u914d\u306f\u7121\u3044\u3002\uff09\u300c–no-cache\u300d\u3068\u3057\u3066\u524a\u9664\u3059\u308b\u4e8b\u3082\u51fa\u6765\u308b<\/p>\n
\u5b9f\u969b\u306b\u76e3\u8996\u3092\u958b\u59cb\u3057SCSS\u3092\u66f8\u304d\u63db\u3048\u3066\u307f\u308b\u3068
\nDecode error \u2013 output not utf-8
\n\u3068\u30a8\u30e9\u30fc\u304c\u51fa\u3066\u30b3\u30f3\u30d1\u30a4\u30eb\u306b\u5931\u6557\u3057\u305f\u3002
\n\u3069\u3046\u3082ruby\u306e\u5974\u306b\u6587\u5b57\u30b3\u30fc\u30c9\u3092\u77e5\u3089\u305b\u3066\u3084\u3089\u306a\u3044\u3068\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u3089\u3057\u3044<\/p>\n
> set RUBYOPT=-EUTF-8<\/code><\/pre>\n
\u3092\u5b9f\u884c\u3057\u305f\u5f8c\u306b\u5b9f\u884c\u3059\u308c\u3070\u6b63\u5e38\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u305f\u3002<\/p>\n
\u3044\u3061\u3044\u3061\u3001\u4efb\u610f\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u3066\u30b3\u30de\u30f3\u30c9\u3092\u6253\u3061\u8fbc\u3080\u306e\u3082\u9762\u5012\u306a\u306e\u3067\u30d0\u30c3\u30c1\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308b\u4e8b\u306b\u3057\u307e\u3059\u3002
\n\u4e0b\u8a18\u306e\u5185\u5bb9\u3092watch.bat\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u540d\u3067WEB\u30eb\u30fc\u30c8\u306b\u7f6e\u304f\u3002<\/p>\n
cd \/d %~dp0\r\nset RUBYOPT=-EUTF-8\r\nsass --watch css --style compact --sourcemap=none<\/code><\/pre>\n
\u65b0\u3057\u304f\u51fa\u305f1\u884c\u76ee\u306f\u5b9f\u884c\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\uff08\/d\u3067\u30c9\u30e9\u30a4\u30d6\u3082\u79fb\u52d5\uff09
\n\u3053\u308c\u3067\u4eca\u5f8c\u306f\u300cwatch.bat\u300d\u3092\u30c0\u30d6\u30eb\u30af\u30ea\u30c3\u30af\u3059\u308b\u3060\u3051\u3067\u76e3\u8996\u304c\u30b9\u30bf\u30fc\u30c8\u3059\u308b\u3002
\nSASS\u306e\u65b9\u306fMixin\u304c\u7528\u610f\u3055\u308c\u305fCompass\u3092\u4f7f\u3046\u65b9\u6cd5\u3082\u3042\u308b\u304c\u4f7f\u308f\u306a\u3044\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u304c\u30a6\u30b6\u30a4\u3057\u3001Sublime Text\u306e\u30d3\u30eb\u30c9\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3057\u305f\u308a\u51fa\u6765\u308b\u304c\u3044\u3061\u3044\u3061\u30d3\u30eb\u30c9\u3059\u308b\u306e\u304c\u9762\u5012\u306a\u306e\u3067\u3001\u73fe\u5728\u306fSASS\u3092\u30d0\u30c3\u30c1\u6a5f\u80fd\u3067\u76e3\u8996\u3055\u305b\u308b\u65b9\u6cd5\u306b\u843d\u3061\u7740\u3044\u3066\u307e\u3059\u3002<\/p>\n
\u3042\u3068\u306fjavascript\u306eminify\uff08\u6700\u5c0f\u5316\uff09\u306e\u65b9\u3060\u304c\u6700\u5c0f\u5316\u3082\u8272\u3005\u30bd\u30d5\u30c8\u304c\u3042\u308b\u304cuglify-js\u3092\u4f7f\u3063\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u305f\u3002
\n\u65e2\u306bNode.js<\/a>\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u308b\u306e\u3067node.js\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0npm\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3068\u3059\u3050\u306b\u4f7f\u3048\u308b\u3002<\/p>\n
> npm install -g uglify-js<\/code><\/pre>\n
\u30dd\u30a4\u30f3\u30c8\u306f -g\u3092\u4ed8\u3051\u3066\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u304b\u3089\u30c0\u30a4\u30ec\u30af\u30c8\u306b\u64cd\u4f5c\u53ef\u80fd\u306b\u3057\u3066\u308b\u6240\u3067\u3059\u3002
\n\uff08\u3082\u3061\u308d\u3093\u3001\u8907\u96d1\u306a\u52d5\u4f5c\u3092\u3055\u305b\u305f\u3044\u5834\u5408\u306f\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u4f7f\u308f\u305a\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u66f8\u3044\u3066node.js\u7d4c\u7531\u3067uglify-js\u3067\u52d5\u4f5c\u3092\u3055\u305b\u308b\u4e8b\u3082\u53ef\u80fd\u3067\u3059\u3002\uff09<\/p>\n
\u500b\u4eba\u7684\u306b\u3001min\u7121\u3057\u304cDevelopment\uff08\u958b\u767a\u7528\uff09min\u3042\u308a\u304cDistribution\uff08\u516c\u958b\u7528\uff09\u3068\u3044\u3046\u4f7f\u3044\u65b9\u3092\u3057\u3066\u3044\u3066javascript\u3092\u6700\u5c0f\u5316\u306f\u516c\u958b\u76f4\u524d\u306b\u3059\u308b\u3060\u3051\u3060\u304c\u3001\u305d\u308c\u3067\u3082\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3059\u308b\u306e\u306f\u9762\u5012\u306a\u306e\u3067\u30d0\u30c3\u30c1\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u3063\u305f\u3002
\n\u4e0b\u8a18\u306e\u5185\u5bb9\u3092js-min.bat\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u540d\u3067\u4fdd\u5b58\u3002<\/p>\n
cd \/d %~dp0\r\nuglifyjs -c -m -o js\\common.min.js js\\common.js<\/code><\/pre>\n
-c<\/strong> \u5727\u7e2e\u7387\u9ad8\u3081\u306b\u3059\u308b\u3002
\n-m<\/strong> \u5909\u6570\u540d\u3068\u304b\u3082\u77ed\u7e2e\u3059\u308b\u3002
\n-o js\\common.min.js<\/strong>\u306f\u51fa\u529b\u30d5\u30a1\u30a4\u30eb\u306e\u6307\u5b9a\u3067\u3059\u3002
\nSass\u306e\u6240\u3067\u66f8\u3044\u305fSource Map\u3092\u4f7f\u3044\u305f\u3044\u5834\u5408\u306f\u300c–source-map js\\common.js.map\u300d\u3068\u3059\u308c\u3070OK\u3002
\n\u3053\u308c\u3067\u300cjs-min.bat\u300d\u3092\u30c0\u30d6\u30eb\u30af\u30ea\u30c3\u30af\u3059\u308b\u3060\u3051\u3067\u6700\u5c0f\u5316\u3055\u308c\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Prepros\u304c\u6709\u6599\u5316\u3057\u305f\u3088\u3046\u3067\u8d77\u52d5\u306e\u5ea6\u306b\u300c\u91d1\u6255\u3048\u300d\u3001\u5b9a\u671f\u7684\u306b\u300c\u91d1\u6255\u3048\u300d\u3068\u3046\u308b\u3055\u304f\u306a\u308a\u3001\u66b4\u8d70\u3059\u308b\u983b\u5ea6\u304c\u5897\u3048\u305f\u3002 \u4f7f\u7528\u983b\u5ea6\u306f\u9ad8\u304f\u306a\u3063\u3066\u308b\u306e\u3067\u91d1\u3092\u6255\u3063\u3066\u3082\u3044\u3044\u30ec\u30d9\u30eb\u304b\u3082\u3057\u308c\u306a\u3044\u3051\u3069\u3001\u8d85\u591a\u6a5f\u80fd\u306aPrepros\u306eSCSS\u3068jav<\/p>\n","protected":false},"author":2,"featured_media":1851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[205],"tags":[35,66,282],"class_list":["post-1847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creatorsdiary","tag-css","tag-javascript","tag-sass"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/1847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/comments?post=1847"}],"version-history":[{"count":10,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/1847\/revisions"}],"predecessor-version":[{"id":2285,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/1847\/revisions\/2285"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media\/1851"}],"wp:attachment":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media?parent=1847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/categories?post=1847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/tags?post=1847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}