FoundationPress:要将任务添加到Gruntfile.js

Question

我正在使用出色的FoundationPress，并希望将一个任务添加到我的手表中，以便从单个.scss文件中创建单个.css文件。在我的例子中，这是针对CKEditor的，因为它需要一个单独的.css文件来定制输入区域的格式化。

然而，每当我编辑我的.scss文件时，我都会得到这个输出：

>> File "ckeditor/nb-ckeditor.scss" changed.
Warning: Task "sassckeditor" not found. Use --force to continue.
Aborted due to warnings.

下面是Gruntfile.js的内容(有关添加到原始内容的内容，请参见ADD 1和ADD 2)：

module.exports = function(grunt) {
  require('time-grunt')(grunt);

  grunt.initConfig(
  {
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        sourceMap: true
      },

      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/foundation.css': 'scss/foundation.scss'
        }
      }
    },

    /* ADD 1 BEGIN */
    sassckeditor: {
      options: {
        sourceMap: true
      },

      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'ckeditor/nb-ckeditor-fromsass.css': 'ckeditor/nb-ckeditor.scss'
        }
      }
    },
    /*  ADD 1 END */

    copy: {
      scripts: {
        expand: true,
        cwd: 'bower_components/foundation/js/vendor/',
        src: '**',
        flatten: 'true',
        dest: 'js/vendor/'
      },

      iconfonts: {
        expand: true,
        cwd: 'bower_components/fontawesome/',
        src: ['**', '!**/less/**', '!**/css/**', '!bower.json'],
        dest: 'assets/fontawesome/'
      },

    },
      'string-replace': {

        fontawesome: {
          files: {
            'assets/fontawesome/scss/_variables.scss': 'assets/fontawesome/scss/_variables.scss'
          },
          options: {
            replacements: [
              {
                pattern: '../fonts',
                replacement: '../assets/fontawesome/fonts'
              }
            ]
          }
        },
      },

    concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: [

          'bower_components/foundation/js/foundation/foundation.js',
          'js/custom/*.js'

          ],
          dest: 'js/foundation.js',
        },
      },

    uglify: {
      dist: {
        files: {
          'js/foundation.js': ['js/foundation.js']
        },
        options: {
            preserveComments: false
        }
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass'],
        options: {
              livereload:true,
            }
      },

      /* ADD 2 BEGIN */
      sassckeditor: {
        files: 'ckeditor/*.scss',
        tasks: ['sassckeditor'],
        options: {        
          livereload:true,    
        }
      },
      /* ADD 2 END */

      js: {
        files: 'js/custom/**/*.js',
        tasks: ['concat', 'uglify'],
        options: {
          livereload:true,
        }
      },

       all: {
        files: '**/*.php',
        options: {
            livereload:true,
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-string-replace');

  grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'concat', 'uglify']);
  grunt.registerTask('default', ['watch', 'sassckeditor']);
};

我做错了什么？提前感谢！

Answer 1

好的，只要在我的"dist“任务中添加一个”file“条目就可以了：

sass: {
  options: {
    sourceMap: true
  },

  dist: {
    options: {
      outputStyle: 'compressed'
    },
    files: {
      'css/foundation.css': 'scss/foundation.scss',
      'css/nb-ckeditor.css': 'scss/nb-ckeditor.scss' // <-- THIS
    }
  }
},

Answer 2

从读取代码看，错误似乎来自试图以'sassckeditor‘的名称运行一个任务，而不是通过'sass’任务发送.scss。下面是代码应该是什么样子的示例：

/* ADD 2 BEGIN */
  sassckeditor: {
   files: 'ckeditor/*.scss',
   tasks: ['sass'],
   options: {        
    livereload:true,    
   }
  },
/* ADD 2 END */

这将使CKEditor的CKEditor文件与Sass文件的其余部分保持分离，但仍然会彻底执行真正编译.scss文件的正确的“sass”任务。