Сборка Grunt не создает файлы css

Я новичок в Yeoman и Grunt.

При выполнении сборки Grunt кажется, что сборка завершается успешно, но файлы dist/styles/*.css не создаются.

Судя по журналам, стили компилируются в .tmp/styles/ (см. задачу «compass:dist» (компас) ниже), но не копируются и не минимизируются в dist/styles. и поэтому "usemin:css" (usemin) не сохраняет файлы. - Но это только предположение.

Я использую базовый файл Gruntfile.info, сгенерированный yoman (я добавил его ниже), и единственное изменение, которое я сделал, это закомментировать задачу cssmin, так как предполагается выполнить то же самое.

Вот результат сборки:

$ 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'
  ]);

Ваше здоровье!


css angularjs gruntjs yeoman compass-sass
person special0ne    schedule 06.02.2014    source источник
comment
Не похоже, что он находит какие-либо файлы CSS для минимизации. Как выглядит ваш Gruntfile.js? И почему задача cssmin закомментирована?   -  person Jonathan Palumbo    schedule 07.02.2014
comment
@JonathanPalumbo Я добавил запрошенную информацию к вопросу.   -  person special0ne    schedule 07.02.2014
comment
как выглядит app/index.html? Вот где он ищет файлы css   -  person Matt Greer    schedule 07.02.2014
comment
@MattGreer index.html ищет файлы css в style/*.css ‹/script›‹link rel=stylesheet href=styles/bootstrap.css›‹link -- кажется, что файлы туда не копируются   -  person special0ne    schedule 07.02.2014

Ответы (3)


arrow_upward
8
arrow_downward

По моему опыту, Yeoman из коробки нуждается в некоторой настройке. Это движок Grunt действительно хочет минимизировать вещи - это одно из его основных преимуществ. Я тоже новичок в этом, но я думаю, что пустая область cssmin в файле grunt - это то, что вас смущает. Попробуйте поместить что-то подобное в область cssmin файла gruntfile.js:

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

Это должно дать вашей минимизации css некоторые зубы. И затем вы должны раскомментировать cssmin в задаче сборки в нижней части gruntfile.js, чтобы он запускался, когда вы выполняете «сборку grunt» в CLI.

person serraosays    schedule 07.02.2014

arrow_upward
12
arrow_downward

В вашем HTML может быть проблема, возможно, вы забыли добавить комментарии к задаче ворчания.

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
person Foysal Osmany    schedule 08.11.2014
comment
Стыдно сказать, что это была моя проблема. Я забыл, что комментарии в html важны для сборки grunt. Новичок в Angular и Yeoman, так что спасибо! - person mthrasher33; 26.01.2016
comment
Это очень помогло мне, и я считаю, что это должен быть принятый ответ. Спасибо! - person ccu; 02.08.2017

arrow_upward
0
arrow_downward

Я пробовал все варианты, описанные здесь, и ни один из них не работал для меня. Что решило проблему в моем случае: назовите свой файл с расширением SCSS, как файл main.scss, например. custom.scss находится в папке ‹%= yeoman.app %>/styles/.

person camposer    schedule 28.01.2016