即使没有进行任何更改,我如何强制Grunt编译Sass?

时间:2016-03-18 11:00:11

标签: sass gruntjs grunt-contrib-watch

如果我的Sass文件无法更改,我希望每次执行grunt时都会编译sass。有时观察者无法检测编译结果是否与现有CSS文件不同,强制编译结果的唯一方法是编辑其中一个Sass文件。

Grunt档案:

/**
 * @file
 */
module.exports = function(grunt) {

  // This is where we configure each task that we'd like to run.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      // This is where we set up all the tasks we'd like grunt to watch for changes.
      scripts: {
        files: ['js/source/{,*/}*.js'],
        tasks: ['uglify'],
        options: {
          spawn: false,
        },
      },
      images: {
        files: ['images/source/{,*/}*.{png,jpg,gif}'],
        tasks: ['imagemin'],
        options: {
          spawn: false,
        }
      },
      vector: {
        files: ['images/source/{,*/}*.svg'],
        tasks: ['svgmin'],
        options: {
          spawn: false,
        }
      },
      css: {
        files: ['sass/{,*/}*.{scss,sass}'],
        tasks: ['sass']
      }
    },
    uglify: {
      // This is for minifying all of our scripts.
      options: {
        sourceMap: true,
        mangle: false
      },
      my_target: {
        files: [{
          expand: true,
          cwd: 'js/source',
          src: '{,*/}*.js',
          dest: 'js/build'
        }]
      }
    },
    imagemin: {
      // This will optimize all of our images for the web.
      dynamic: {
        files: [{
          expand: true,
          cwd: 'images/source/',
          src: ['{,*/}*.{png,jpg,gif}' ],
          dest: 'images/optimized/'
        }]
      }
    },
    svgmin: {
      options: {
        plugins: [{
          removeViewBox: false
        }, {
          removeUselessStrokeAndFill: false
        }]
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'images/source/',
          src: ['{,*/}*.svg' ],
          dest: 'images/optimized/'
        }]
      }
    },
    sass: {
      // This will compile all of our sass files
      // Additional configuration options can be found at https://github.com/sindresorhus/grunt-sass
      options: {
        sourceMap: true,
        // This controls the compiled css and can be changed to nested, compact or compressed.
        outputStyle: 'expanded',
        precision: 5
      },
      dist: {
        files: {
          'css/base/base.css': 'sass/base/base.sass',
          'css/components/components.css': 'sass/components/components.sass',
          'css/components/tabs.css': 'sass/components/tabs.sass',
          'css/components/messages.css': 'sass/components/messages.sass',
          'css/layout/layout.css': 'sass/layout/layout.sass',
          'css/theme/theme.css': 'sass/theme/theme.sass',
          'css/theme/print.css': 'sass/theme/print.sass'
        }
      }
    },
    browserSync: {
      dev: {
        bsFiles: {
          src : [
            'css/**/*.css',
            'templates/{,*/}*.twig',
            'images/optimized/{,*/}*.{png,jpg,gif,svg}',
            'js/build/{,*/}*.js',
            '*.theme'
          ]
        },
        options: {
          watchTask: true,
          // Change this to "true" if you'd like the css to be injected rather than a browser refresh. In order for this to work with Drupal you will need to install https://drupal.org/project/link_css keep in mind though that this should not be run on a production site.
          injectChanges: false
        }
      }
    },
  });
  // This is where we tell Grunt we plan to use this plug-in.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-svgmin');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');
  // Now that we've loaded the package.json and the node_modules we set the base path
  // for the actual execution of the tasks
  // grunt.file.setBase('/')
  // This is where we tell Grunt what to do when we type "grunt" into the terminal.
  // Note: if you'd like to run and of the tasks individually you can do so by typing 'grunt mytaskname' alternatively
  // you can type 'grunt watch' to automatically track your files for changes.
  grunt.registerTask('default', ['browserSync','watch']);
};

1 个答案:

答案 0 :(得分:0)

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

只需将sass注册为您在键入grunt时运行的任务。

如果你这样做并且sass文件仍未提供你想要的结果,那么你需要重新访问sass任务,并确保你将文件管道放在你想要的位置

更酷的选择:

newer:当您运行grunt时,如果新CSS与旧版本之间存在差异,则您希望sass仅编译为CSS 。在这种情况下,请尝试grunt-newer。添加newer:taskyouwanttorun:option即可。

watch:sass:除了更改其中一个sass文件之外,您希望在watch期间编译sass。很简单,只需设置一个查看您要修改的文件的任务,image / javascript / html / whatever,并将任务设置为sass