{"id":4702,"date":"2016-01-31T00:43:46","date_gmt":"2016-01-30T16:43:46","guid":{"rendered":"https:\/\/lttt.vanabel.info\/?p=4702"},"modified":"2016-01-31T00:43:46","modified_gmt":"2016-01-30T16:43:46","slug":"laravel-5-0rumenbiji3-shiyongelixiryugulplaijianhuacssjsbushu","status":"publish","type":"post","link":"https:\/\/lttt.vanabel.cn\/?p=4702","title":{"rendered":"Laravel 5.0\u5165\u95e8\u7b14\u8bb0(3): \u4f7f\u7528Elixir\u4e0eGulp\u6765\u7b80\u5316css+js\u90e8\u7f72"},"content":{"rendered":"

\u5177\u4f53\u8fd9\u4e24\u4e2a\u662f\u5565\u73a9\u610f, \u6211\u4e5f\u4e0d\u6e05\u695a, \u4f46\u662f\u6211\u9700\u8981\u7684\u662f\u4f7f\u7528\u5b83\u4eec\u6765\u63d0\u4f9b\u4e00\u4e2a\u975e\u5e38\u7b80\u5355\u7684\u5f00\u53d1\u6d41\u7a0b. \u6211\u5728\u672c\u7b14\u8bb0\u4e2d\u4f7f\u7528\u7684\u662fbootstrap+less+jquery<\/code>. \u4f60\u5c06\u4f1a\u770b\u5230, \u6211\u4eec\u5b9e\u9645\u4e0a\u53ea\u9700\u8981\u7ef4\u62a4\u4e24\u4e2a\u6587\u4ef6, usr.less<\/code>\u4ee5\u53causr.js<\/code>, \u800c\u5982\u4f55\u901a\u8fc7\u5b83\u4eec\u4ea7\u751f\u60f3\u8981\u7684css\u4e0ejs\u811a\u672c(\u751a\u81f3\u81ea\u52a8\u5d4c\u5165\u5230\u7f51\u9875\u6a21\u677f)\u90fd\u662f\u81ea\u52a8\u7684.
\n\u9996\u5148, \u6211\u4eec\u6765\u770b\u5982\u4f55\u4f7f\u7528Gulp.
\n\u7531\u4e8eGulp\u4ee5\u53caElixir\u90fd\u9700\u8981\u901a\u8fc7npm\u5305\u7ba1\u7406\u5668\u6765\u5b89\u88c5, \u6211\u4eec\u9996\u5148\u5b89\u88c5node\u4ee5\u53canpm.
\n<\/p>\n

<\/a>\u5b89\u88c5node<\/h3>\n
    \n
  1. \u6309\u7167\u5b98\u65b9\u6559\u7a0b<\/a>\u5b89\u88c5node 4<\/code>, \u6210\u529f\u5b89\u88c5\u540e\u6267\u884cnode -v<\/code> \u5c06\u4f1a\u770b\u5230\u7248\u672c\u662f: v4.2.6. \u5176\u5b9e\u5b83\u8fd8\u5b89\u88c5\u4e86npm<\/code> (node package manager)<\/li>\n
  2. \u7531\u4e8e\u5f85\u4f1a\u6211\u4eec\u4f1a\u78b0\u5230npm WARN optional dep failed, continuing fsevents@1.0.6<\/code>\u4f7f\u5f97\u5b89\u88c5Gulp\u4e0d\u6210\u529f, \u6211\u4eec\u9700\u8981\u4fee\u6539npm\u7248\u672c\u4e3a3.3.12<\/code>. \u6b64\u5916, \u4e3a\u52a0\u5feb\u8bbf\u95ee\u901f\u5ea6, \u6211\u4eec\u8fd8\u5c06node\u5305\u7684\u6e90\u8bbe\u4e3a\u6dd8\u5b9d\u6e90.\n
    npm config set registry https:\/\/registry.npm.taobao.org\nsudo npm install -g npm@3.3.12<\/code><\/pre>\n<\/li>\n<\/ol>\n
    <\/a>\u5b89\u88c5Gulp<\/h3>\n
    \u5207\u6362\u5230cdhome<\/code>, \u4f60\u4f1a\u53d1\u73b0\u6709\u4e2apackage.json<\/code>, \u6253\u5f00\u53ef\u4ee5\u770b\u5230\u8fd9\u91cc\u544a\u8bc9node\u6211\u4eec\u7684\u5e94\u7528\u4f9d\u8d56\u4e8eGulp.<\/p>\n
    \u6211\u4eec\u6309\u7167\u5b98\u65b9\u6559\u7a0b<\/a>\u5168\u5c40\u5b89\u88c5Gulp:<\/p>\n
     sudo npm install --global gulp<\/code><\/pre>\n
    <\/a>\u5b89\u88c5Elixir<\/h3>\n
    cdhome\nnpm install<\/code><\/pre>\n
    \u81f3\u6b64, \u5b8c\u6210\u4e86\u5b89\u88c5.<\/p>\n
    <\/a>\u5b89\u88c5Bower<\/h3>\n
    \u6211\u4eec\u5c06\u7528bower\u6765\u5b89\u88c5bootstrap<\/code>, jquery<\/code>.<\/p>\n
     sudo npm install --global bower<\/code><\/pre>\n
    <\/a>\u4f7f\u7528bower\u5b89\u88c5Bootstrap+font-awesome<\/h3>\n
    \u5207\u6362\u5230\u6839\u76ee\u5f55cdhome<\/code>\u5e76\u65b0\u5efabower.json<\/code>:<\/p>\n
    {\n  \"name\": \"KindlePusher\",\n  \"description\": \"Laravel 5 framework for KindlePusher\",\n  \"license\": \"MIT\",\n  \"private\": true,\n  \"dependencies\": {\n    \"bootstrap\": \"~3.3.6\",\n    \"font-awesome\": \"~4.5.0\"\n  }\n}<\/code><\/pre>\n
    \u5e94\u8be5\u6ce8\u610f, bootstrap\u81ea\u5e26jquery, \u5982\u679c\u8981\u4f7f\u7528jquery-ui, \u5219\u53ef\u80fd\u4f1a\u6709\u547d\u540d\u51b2\u7a81, \u89e3\u51b3\u529e\u6cd5\u53ef\u4ee5\u53c2\u8003\u8fd9\u91cc<\/a>.<\/p><\/blockquote>\n
    \u63a5\u7740, \u521b\u5efa.bowerrc<\/code>\u6765\u6307\u5b9abower\u5b89\u88c5\u5305\u7684\u8def\u5f84:<\/p>\n
    {\n \"directory\": \"resources\/assets\/bower\"\n}<\/code><\/pre>\n
    \u7531\u4e8e\u6211\u4eec\u5c06\u8981\u4f7f\u7528\u65b0\u7684bootstrap, \u6211\u4eec\u53ef\u4ee5\u5220\u9664resources\/assets\/less\/bootstrap<\/code>\u76ee\u5f55<\/p><\/blockquote>\n
    \u6700\u540e, \u6211\u4eec\u53ef\u4ee5\u4f7f\u7528bower install<\/code>\u5b89\u88c5\u65b0\u7684\u5305\u4e86.<\/p>\n
    <\/a>\u4f7f\u7528Gulp<\/h3>\n
    \u4f7f\u7528Gulp\u6211\u4eec\u9996\u5148\u5728\u6839\u76ee\u5f55\u521b\u5efagulpfile.js<\/code>:<\/p>\n
    process.env.DISABLE_NOTIFIER = true;\nvar elixir = require('laravel-elixir');\nvar bowerDir='resources\/assets\/bower\/';\nvar lessPaths = [\n  bowerDir + \"bootstrap\/less\",\n  bowerDir + \"font-awesome\/less\",\n];\n\n\/\/mixed mission: less+jquery\nelixir(function(mix) {\n    mix .less('app.less', 'public\/css\/app.css', { paths: lessPaths})\n        .scripts([\n          'jquery\/dist\/jquery.min.js',\n          'bootstrap\/dist\/js\/bootstrap.min.js',\n        ], 'public\/js\/app.js', bowerDir)\n        \/\/need to create the usr.js\n        .copy('resources\/assets\/js\/usr.js', 'public\/js\/usr.js')\n        .copy([bowerDir + 'font-awesome\/fonts', bowerDir+'bootstrap\/fonts'], 'public\/fonts');\n});<\/code><\/pre>\n
    \u6ce8\u610f, \u8fd9\u91cc\u6211\u4eec\u4f7f\u7528\u4e86\u4e24\u4e2a\u6587\u4ef6\u6765\u5206\u522b\u5b9a\u4e49css\u4e0ejs. \u4f60\u53ef\u80fd\u9700\u8981\u4e86\u89e3\u6700\u57fa\u672c\u7684less\u7528\u6cd5<\/a>, \u8fd9\u91cc\u6211\u7ed9\u51fa\u4e00\u4e2a\u6a21\u677f(\u7528vimcss<\/code>\u7f16\u8f91)<\/p>\n
    @import \"bootstrap\";\n@import \"font-awesome\";\n@btn-font-weight: 300;\n@font-family-sans-serif: \"Roboto\", Helvetica, Arial, sans-serif;\n*{font-family:\"Arial\",\"Microsoft YaHei\" !important;}\n*{text-shadow: silver 0px 0px 1px !important;}\nhtml{\n  position: relative;\n  height:100%;\n}\nbody{\n  margin-bottom:30px;\n}\nbody, label, .checkbox label {\n  font-weight: 300;\n}\n@footerh: 30px;\n#wrap{\n  min-height: 100%;\n  height: auto;\n  margin: 0 auto -@footerh;\n  padding: 0 0 @footerh;\n}\n#footer{\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: @footerh;\n  background-color: $F5F5F5;\n  color: #777;\n  text-align: center;\n  border-top: 3px solid #E5E5E5;\n  .container {\n    padding: 0 15px;\n  }\n}\n.layout { border-radius: 0.25rem; height:40rem; }\n#wrap {\n  .wrapper{ .make-row(); }\n  .container{\n    padding: 60px 15px 0;\n    .container-fluid\n  }\n  .header{\n    height: 5rem;\n    margin-bottom: 2rem;\n    background-color: #DAEEFF;\n    text-align: center;\n    border-radius: 0.25rem;\n  }\n  .sidbar{\n    float: right;\n    width: 15rem;\n    background-color: #FAE3C4;\n    .layout\n  }\n  .content{\n    margin-right: 15.5rem;\n    background-color: #957BBE;\n    .layout\n  }\n}\npre{\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}<\/code><\/pre>\n
    \u63a5\u7740, \u6211\u4eec\u8fd8\u9700\u8981\u521b\u5efacdhome &&mkdir resources\/assets\/js\/usr.js<\/code>, \u5176\u5185\u5bb9\u4e3a:<\/p>\n
    $(function(){\n  \/\/you can comment it out after test\n  alert('hello word');\n});\n<\/code><\/pre>\n
    \u81f3\u6b64, \u6211\u4eec\u53ef\u4ee5\u8fd0\u884c(\u6839\u76ee\u5f55\u4e0b):gulp less<\/code>, gulp scripts<\/code>, gulp<\/code>, \u5206\u522b\u8868\u793a\u7f16\u8bd1css<\/code>, js<\/code>, css+js<\/code>.
    \n\u4ee5\u540e\u7684\u6d41\u7a0b\u5c31\u662f\u4fee\u6539vimcss<\/code>\u548cvimjs<\/code>, \u7136\u540e\u8fd0\u884c\u4e0a\u8ff0\u547d\u4ee4, \u5219\u7f51\u7ad9\u4f1a\u81ea\u52a8\u66f4\u65b0.<\/p>\n
    \u6700\u540e, \u6211\u4eec\u4fee\u6539\u4e0b\u516c\u5171\u6a21\u677f, \u4f7f\u5f97\u5b83\u81ea\u52a8\u5d4c\u5165\u6211\u4eec\u901a\u8fc7Gulp\u7f16\u8bd1\u7684css\u4e0ejs. \u4f5c\u4e3a\u6269\u5145, \u6211\u8fd8\u793a\u4f8b\u4e86\u5982\u4f55\u5b89\u88c5Laravel\u6269\u5c55\u5305laravelcollective\/html<\/code>, \u5b83\u5c06\u516c\u5171\u6a21\u677f\u4e2dHtml\u4ee3\u7801\u5927\u5927\u7b80\u5316\u4e86.<\/p>\n
    <\/a>\u516c\u5171\u6a21\u677f\u7684\u8bbe\u8ba1<\/h3>\n
    \u4e3a\u4e86\u7b80\u5316\u4ee3\u7801, \u6211\u4eec\u4f7f\u7528laravelcollective\/html<\/a>, \u8bf7\u81ea\u884c\u6309\u7167\u94fe\u63a5\u5b89\u88c5.<\/p>\n
    \u6ce8\u610f, \u7531\u4e8e\u6211\u4eec\u7528\u7684\u7248\u672c\u662fLaravel 5.0, \u6211\u4eec\u9700\u8981\u5b89\u88c5\u4f4e\u7248\u672c\u7684laravelcollective\/html, \u5b9e\u9645\u4e0a\u7684\u914d\u7f6e\u662f: \"laravelcollective\/html\": \"5.0.*\"<\/code>, \u800c\u4e14\u4f1a\u62a5\u9519<\/p>\n
    [Symfony\\Component\\Debug\\Exception\\FatalErrorException] Call to undefined method Illuminate\\Foundation\\Application::getCachedCompilePath()<\/code>
    \n\u8fd9\u65f6, \u6211\u4eec\u9700\u8981\u5220\u9664:rm vendor\/compiled.php<\/code>
    \n\u6700\u540e, \u5728config\/app.php<\/code>\u7684\u914d\u7f6e\u4e2d\u4e5f\u8981\u53bb\u6389\u4e0a\u8ff0\u94fe\u63a5\u7ed9\u51fa\u7684::class<\/code><\/p>\n
    \u63a5\u4e0b\u6765, \u6211\u4eec\u5c31\u53ef\u4ee5\u5728app.blade.php<\/code>\u4e2d\u4f7f\u7528{!! Html::style('css\/app.css') !!}<\/code>\u6765\u8f7d\u5165css\u4e86, \u7c7b\u4f3c\u7684\u5728< \/body><\/code>\u4e4b\u524d\u8f7d\u5165javascript: {!! HTML::script('js\/usr.js') !!}<\/code><\/p><\/blockquote>\n
    \u8fd9\u91cc, \u6211\u52a0\u5165\u4e86bootstrap\u7684\u4e00\u4e2a\u6846\u67b6(\u5728< nav>< \/nav><\/code>\u4e4b\u540e):<\/p>\n
    \n      
    \n        @yield('header')\n      <\/div>{{--End of header--}}\n      
    \n        @yield('content')\n      <\/div>{{--End of content--}}\n      
    \n        @yield('sidbar')\n      <\/div>{{--End of sidbar--}}\n    <\/div>{{--End of Wrap--}}\n    
    \n      
    \n        
    Designed by YourName<\/a> &bull; Copyright &copy; {{ date(\"Y\") }} {{ $projname or '' }}<\/a> All rights Reserved.<\/p>\n      <\/div>\n    <\/div>{{--End of footer--}}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    \u5177\u4f53\u8fd9\u4e24\u4e2a\u662f\u5565\u73a9\u610f, \u6211\u4e5f\u4e0d\u6e05\u695a, \u4f46\u662f\u6211\u9700\u8981\u7684\u662f\u4f7f\u7528\u5b83\u4eec\u6765\u63d0\u4f9b\u4e00\u4e2a\u975e\u5e38\u7b80\u5355\u7684\u5f00 …<\/p>\n
      Laravel 5.0\u5165\u95e8\u7b14\u8bb0(3): \u4f7f\u7528Elixir\u4e0eGulp\u6765\u7b80\u5316css+js\u90e8\u7f72<\/span> \u9605\u8bfb\u66f4\u591a »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[236,271,366,501,522,531,537,215],"class_list":["post-4702","post","type-post","status-publish","format-standard","hentry","category-net","tag-blade","tag-css","tag-elixir","tag-gulp","tag-js","tag-laravel","tag-less","tag-gonggongmoban"],"_links":{"self":[{"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=\/wp\/v2\/posts\/4702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4702"}],"version-history":[{"count":0,"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=\/wp\/v2\/posts\/4702\/revisions"}],"wp:attachment":[{"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lttt.vanabel.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}