Grunt build does not create css files

Question

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!

It doesn't look like it is finding any CSS files to be minified. What does your Gruntfile.js look like? Also why is the cssmin task commented out? — Jonathan Palumbo
– Jonathan Palumbo, Commented Feb 6, 2014 at 23:25
@JonathanPalumbo I added the requested information to the question. — special0ne
– special0ne, Commented Feb 6, 2014 at 23:38
what does app/index.html look like? That is where it's looking for the css files — Matt Greer
– Matt Greer, Commented Feb 6, 2014 at 23:40
@MattGreer index.html is looking for the css files in style/*.css </script><link rel="stylesheet" href="styles/bootstrap.css"><link -- it seem like the files are not being copied there — special0ne
– special0ne, Commented Feb 7, 2014 at 1:26

Foysal Osmany · Accepted Answer · 2014-11-08 19:59:16Z

12

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 -->

answered Nov 8, 2014 at 19:59

Foysal Osmany

1,60115 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mthrasher33 Over a year ago

Embarrassed to say this was my issue. I forgot that comments in the html are important for the grunt build. New to Angular and Yeoman, so thank you!

ccu Over a year ago

This helped me out immensely and I believe should be the accepted answer. Thanks!

serraosays · Accepted Answer · 2014-02-07 04:32:41Z

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.

camposer · Accepted Answer · 2016-01-28 06:16:47Z

0

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.

answered Jan 28, 2016 at 6:16

camposer

5,6722 gold badges21 silver badges16 bronze badges

Collectives™ on Stack Overflow

Grunt build does not create css files

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related