2014-02-06 42 views
3

我是Yeoman和Grunt的新手。Grunt構建不會創建css文件

雖然做咕嚕打造構建似乎成功結束,但DIST /風格/ *。不被創建的CSS文件。

從它看起來像樣式的日誌被編譯成.TMP /風格/(見「指南針:DIST」(羅盤)下面的任務),但不被複制或精縮到dist /風格。這就是爲什麼「usemin:css」(usemin)不會文件的文件。 - 但這只是一個猜測。

我使用yeoman生成的基本Gruntfile.info(我在下面添加它) 並且我做的唯一更改是註釋掉cssmin任務,因爲假設要執行same thing

這裏是生成輸出:

$ grunt build 
Running "clean:dist" (clean) task 
Running "bower-install:app" (bower-install) task 

Running "useminPrepare:html" (useminPrepare) task 
Going through app/index.html to update the config 
Looking for build script HTML comment blocks 

Configuration is now: 

    concat: 
    { generated: 
    { files: 
     [ { dest: '.tmp\\concat\\scripts\\scripts.js', 
      src: 
      [ LIBRARIES ] }, 
     { dest: '.tmp\\concat\\scripts\\modules.js', 
      src: 
      [ SOURCE ] } ] } } 

    uglify: 
    { generated: 
    { files: 
     [ { dest: 'dist\\scripts\\scripts.js', 
      src: [ '.tmp\\concat\\scripts\\scripts.js' ] }, 
     { dest: 'dist\\scripts\\modules.js', 
      src: [ '.tmp\\concat\\scripts\\modules.js' ] } ] } } 

    cssmin: 
    {} 

Running "concurrent:dist" (concurrent) task 

Running "imagemin:dist" (imagemin) task 
? app/images/yeoman.png (saved 9.06 kB) 
Minified 1 image (saved 9.06 kB) 

Done, without errors. 

Running "svgmin:dist" (svgmin) task 

Done, without errors. 

Running "compass:dist" (compass) task 
directory .tmp/styles/ 
     create .tmp/styles/bootstrap.css (1.759s) 
     create .tmp/styles/main.css (0.117s) 
     create .tmp/styles/problem-comprehension.css (0.002s) 
     create .tmp/styles/problem-timedword.css (0.002s) 
     create .tmp/styles/track-detail.css (0.009s) 
    Compilation took 1.915s 

Done, without errors. 

Running "autoprefixer:dist" (autoprefixer) task 
Prefixed file ".tmp/styles/bootstrap.css" created. 
Prefixed file ".tmp/styles/main.css" created. 
Prefixed file ".tmp/styles/problem-comprehension.css" created. 
Prefixed file ".tmp/styles/problem-timedword.css" created. 
Prefixed file ".tmp/styles/track-detail.css" created. 

Running "concat:generated" (concat) task 
File ".tmp\concat\scripts\scripts.js" created. 
File ".tmp\concat\scripts\modules.js" created. 

. 
. 
. 

Running "usemin:html" (usemin) task 

Processing as HTML - dist/404.html 
Update the HTML to reference our concat/min/revved script files 
Update the HTML with the new css filenames 
Update the HTML with the new img filenames 
Update the HTML with data-main tags 
Update the HTML with data-* tags 
Update the HTML with background imgs, case there is some inline style 
Update the HTML with anchors images 
Update the HTML with reference in input 
. 
All HTML files in the project 
. 

Running "usemin:css" (usemin) task 

Running "htmlmin:dist" (htmlmin) task 
File <FILE>.html created. 

Done, without errors. 


Execution Time (2014-02-06 22:23:38 UTC) 
clean:dist   1.3s ■■■■■■■■■■ 7% 
concurrent:dist 5.3s ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 29% 
ngmin:dist   2.3s ■■■■■■■■■■■■■■■■■ 13% 
copy:dist   6.1s ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 33% 
uglify:generated 2.6s ■■■■■■■■■■■■■■■■■■■ 14% 
usemin:html  349ms ■■■ 2% 
Total 18.4s 

構建目標從Grunt.js:

grunt.registerTask('build', [ 
    'clean:dist', 
    'bower-install', 
    'useminPrepare', 
    'concurrent:dist', 
    'autoprefixer', 
    'concat', 
    'ngmin', 
    'copy:dist', 
    'cdnify', 
// 'cssmin', 
    'uglify', 
    'rev', 
    'usemin', 
    'htmlmin' 
    ]); 

乾杯!

+0

它看起來並不像它找到任何CSS文件被精縮。你的Gruntfile.js是什麼樣的?另外爲什麼'cssmin'任務被註釋掉了? –

+0

@JonathanPalumbo我在問題中添加了請求的信息。 – special0ne

+0

app/index.html的外觀如何?這就是它尋找的CSS文件 –

回答

8

約曼開箱需要在我的經驗,一些調整。這是Grunt引擎真正想要的東西 - 這是它的主要增值之一。我對它也很新穎,但我想象一下咕嚕聲文件中空的cssmin區域是什麼讓你感到困惑。嘗試把這樣的事情到gruntfile.js你cssmin區 -

cssmin: { 
     dist: { 
      files: { 
       '<%= yeoman.dist %>/styles/main.css': [ 
        '.tmp/styles/{,*/}*.css', 
        '<%= yeoman.app %>/styles/{,*/}*.css' 
       ] 
      } 
     } 
    }, 

這應該做你給你的CSS縮小一些牙齒。然後,您可以在gruntfile.js底部的build task中取消註釋cssmin,以便在CLI上執行「grunt build」時運行它。

10

有可能是在你的HTML問題可能你忘了加上註釋爲繁重的任務。

<!-- build:css(.) styles/vendor.css --> 
<!-- bower:css --> 
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
<!-- endbower --> 
<!-- endbuild --> 
+0

尷尬地說這是我的問題。我忘了HTML中的註釋對於咕嚕聲的構建很重要。 Angular和Yeoman新手,非常感謝! – mthrasher33

+0

這對我非常有幫助,我相信應該是被接受的答案。謝謝! – ccu

0

我嘗試了所有在這裏解釋的選項,沒有爲我工作。在我的情況下解決了這個問題:用SCSS擴展命名文件,作爲main.scss文件,例如custom.scss位於<%= yeoman.app%>/styles /文件夾中。