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

从阅读代码看起来错误来自于尝试以'sassckeditor'的名义运行任务而不是通过'sass'任务发送.scss。以下是您的代码应该是什么样子的示例：

React-native v0.10.0

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

Answer 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
    }
  }
},

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

2 个答案: