FoundationPress：想要将任务添加到 Gruntfile.js答案

【问题标题】：FoundationPress: want to add task to Gruntfile.jsFoundationPress：想要将任务添加到 Gruntfile.js
【发布时间】：2015-11-25 19:29:32
【问题描述】：

我正在使用出色的 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']);
};

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

【问题讨论】：

标签： wordpress sass gruntjs ckeditor

【解决方案1】：

从阅读您的代码看来，错误来自尝试以“sassckeditor”的名称运行任务，而不是通过“sass”任务发送 .scss。以下是您的代码应如下所示的示例：

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

这将使 CKEditor 的 .scss 文件与其他 Sass 文件分开，但仍会通过实际编译 .scss 文件的正确“sass”任务运行它。

【讨论】：

这会将目录 /ckeditor 中文件的 .scss 内容添加到我的主 .css 输出文件中，这不是我想要实现的。如原帖所述，我需要创建一个单独的 .css 文件

【解决方案2】：

好的，只需在我的“dist”任务中添加“文件”条目即可完成此操作：

sass: {
  options: {
    sourceMap: true
  },

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

【讨论】：