CODEWITHSUNDEEP
cssangularjsgruntjscompass-sassyeoman
special0ne
special0ne

Reputation: 6263

Grunt build does not create css files

I am new to Yeoman and Grunt.

While doing Grunt build the build seem to end successfully but dist/styles/*.css files are not being created.

From the logs it looks like the styles are compiled to .tmp/styles/ (see "compass:dist" (compass) task below) but not being copied or minified to dist/styles. and thats why "usemin:css" (usemin) does not file the files. - But this is only a guess.

I am using the basic Gruntfile.info that is generated by yeoman (I added it below) and the only change I made was to comment out the cssmin task since suppose to do the same thing.

Here is the build output: 

$ 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

The build target from Grunt.js:

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

Cheers!

Upvotes: 3

Views: 12044

Answers (3)

camposer
camposer

Reputation: 5612

I tried all the options explained here and none worked for me. What solved the problem in my case: Name your file with SCSS extension, as the main.scss file, e.g. custom.scss located into <%= yeoman.app %>/styles/ folder.

Upvotes: 0

Foysal Osmany
Foysal Osmany

Reputation: 1571

There might be problem in your HTML probably you forgot to add the comments for the grunt task.

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

Upvotes: 12

serraosays
serraosays

Reputation: 7869

Yeoman out of the box needs some tweaking in my experience. It's Grunt engine really wants to minify things - that's one of it's major value-adds. I'm pretty new to it as well, but I imagine the empty cssmin area in the grunt file is what's messing you up. Try putting something like this into your cssmin area of gruntfile.js -

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

That should do you give your css minification some teeth. And, then you would uncomment cssmin in build task at the bottom of gruntfile.js so it runs when you do 'grunt build' on the CLI.

Upvotes: 8

Related Questions