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

Question

我正在使用优秀的 FoundationPress and want to add a task to my watch to create a single .css file out of a single .scss file. In my case, this is for 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

从阅读您的代码来看，错误似乎来自于尝试运行名为 'sassckeditor' 的任务，而不是通过 'sass' 任务发送 .scss。以下是您的代码的示例：

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

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

Answer 2

好的，只需在我的 "dist" 任务中添加 "files" 的条目即可完成此工作：

sass: {
  options: {
    sourceMap: true
  },

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

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

FoundationPress: want to add task to Gruntfile.js

wordpress

sass

ckeditor

gruntjs