Gruntfile.js не работает определенные пакеты

Question

вы можете взглянуть на следующий файл Grunt, чтобы узнать, можете ли вы определить, почему он не запускает cssnano и autoprefixer?

Grunt в настоящее время наблюдает за моим проектом и с каждым сохранением grunt-sass компилируется в порядке, но ни grunt-cssnano, ни autoprefixer не выполняют свою задачу, и об ошибках не сообщается.

Выполнено, без ошибок. Завершенный в 1.906s в Ср Ноя 25 2015 13:12:18 GMT + 0000 (GMT Standard Time) - Ожидание ...

Файл "дерзость \ styles.scss" изменилось. Running «дерзость: расстояние» (дерзость) задача

Я полагаю, что я сделал что-то неправильно с grunt-contrib-watch установки (в частности CSS часть), но это только предположение.

Моя папка проекта выглядит так

• расстояние
  • CSS
    • styles.css
• node_modules (включает в себя все соответствующие пакеты)
• дерзость
  • styles.css
• Gruntfile.js
• package.json

И мой Gruntfile выглядит следующим образом

module.exports = function (grunt) { 

    grunt.initConfig({ 

     sass: { 
      options: { 
       sourceMap: false 
      }, 
      dist: { 
       files: { 
        'dist/css/styles.css': 'sass/styles.scss' 
       } 
      } 
     }, 

     postcss: { 
      options: { 
       map: { 
        inline: false, 
        annotation: 'dist/css/maps/' 
       }, 
       processors: [ 
        require('autoprefixer')({ 
         browsers: 'last 2 versions' 
        }), 
        require('cssnano')() 
       ] 
      }, 
      dist: { 
       src: 'dist/css/styles.css' 
      } 
     }, 

     watch: { 
      sass: { 
       files: 'sass/*.scss', 
       tasks: ['sass'] 
      }, 
      css: { 
       files: 'dist/css/styles.css', 
       tasks: ['cssnano', 'autoprefixer'] 
      } 
     }, 
    }); 

    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-sass'); 
    grunt.loadNpmTasks('grunt-postcss'); 
    grunt.loadNpmTasks('grunt-cssnano');  

    grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano', 'autoprefixer']); 
}; 

Answer 1

регистрации задачи, как вы do:

grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano']); 

будет выполнять задачи один за другим. Поэтому в вашем случае будет выполняться только задача watch, потому что она «никогда не заканчивается», пока вы ее не закончите. Таким образом, sass, postcss:dist, cssnano не будет достигнуто.

Так что в вашем случае он выполнит только задачу наблюдения, которая будет наблюдать за файлами * .scss, чтобы выполнить задачу sass и посмотреть, как style.css выполняет задачуи autoprefixer. Но эти две последние задачи не определены в вашей конфигурации, поэтому он ничего не сделает.

Чтобы решить проблему, удалите задачи с вашего умолчанию зарегистрированной задачи, так как они не используется:

grunt.registerTask('default', ['watch']); 

И добавить конфигурации для каждой недостающей задачи.например:

cssnano: { 
     options: { 
      sourcemap: true 
     }, 
     dist: { 
      files: { 
       'dist/css/styles.min.css': 'dist/css/styles.css' 
      } 
     } 
    }, 
//and same for autoprefixer 

Answer 2

С большим количеством проб и ошибок, похоже, у меня есть решение. Следующий файл теперь запускает Sass, cssnano, autoprefix и watch. Пакеты Sass, cssnano и autoprefix (и я предполагаю, что любые другие, которые добавляются в будущем) будут делать свою вещь в grunt.initConfig, а в нижней части файла registerTask заботится о часах.

Больше работы необходимо выяснить, как создать другие registerTasks, но это на другой день.

Благодаря Mian, который установил меня на правильном пути.

module.exports = функция (пехотинец) {

grunt.initConfig({ 
    sass: { 
     options: { 
      sourceMap: false 
     }, 
     dist: { 
      files: { 
       'dist/css/styles.css': 'sass/styles.scss' 
      } 
     } 
    }, 

    postcss: { 
     options: { 
      map: { 
       inline: false, 
       annotation: 'dist/css/maps/' 
      }, 
      processors: [ 
       require('autoprefixer')({ 
        browsers: 'last 2 versions' 
       }), 
       require('cssnano')() 
      ] 
     }, 
     dist: {     
      src: 'dist/css/styles.css' 
     } 
    }, 

    watch: { 
     sass: { 
      files: 'sass/*.scss', 
      tasks: ['sass', 'postcss'] 
     }, 
    }, 
}); 

grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-sass'); 
grunt.loadNpmTasks('grunt-postcss'); 
grunt.loadNpmTasks('grunt-cssnano');  

grunt.registerTask('default', ['watch']); 

};