Grunt SCSS - 不重裝

Question

我正在努力實現順暢的工作流程。

我的問題：

我的JS修改顯示和微細化以及現場重裝工作正常。

grunt 

或繁重的插件：當我修改我的SCSS文件，它們不運行命令下運行

grunt watch 

它只能當調用：

grunt sass 

這是'grunt sass'控制檯窗口的輸出：

Macintosh:grunt-test Neil$ grunt sass 
Running "sass:dist" (sass) task 
File "css/global.css" created. 

Done, without errors. 

備註：

當我在sass文件上運行'grunt watch'時，我注意到grunt在無緣無故的情況下對javascript執行縮小操作。當這個文件或它的一個依賴關係生效時，這肯定會被調用？

Gruntfile.js內容：

module.exports = function(grunt) { 

// 1. All configuration goes here 
grunt.initConfig({ 

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

    watch: { 
     options: { 
      files: ['css/*.css'], 
      livereload: true 
     }, 

     css: { 
      files: ['css/*.scss'], 
      tasks: ['sass'], 
      options: { 
       spawn: false, 
      } 
     }, 

     scripts: { 
      files: ['js/*.js', 'scss/*.scss'], 
      tasks: ['concat', 'uglify'], 
      options: { 
       spawn: false, 
      } 
     } 
    }, 

    sass: { 
     dist: { 
      options: { 
       style: 'compressed' 
      }, 

      expand: true, 
      cwd: 'scss/', 
      src: ['*.scss'], 
      dest: 'css/', 
      ext: '.css' 
     } 
    }, 

    concat: { 
     // 2. Configuration for concatinating files goes here. 

     dist: { 
      src: [ 
       'js/libs/*.js', // All JS in the libs folder 
       'js/global.js' // This specific file 
      ], 
      dest: 'js/build/production.js', 
     } 
    }, 

    uglify: { 
     build: { 
      src: 'js/build/production.js', 
      dest: 'js/build/production.min.js' 
     } 
    }, 

    imagemin: { 
     dynamic: { 
      files: [{ 
       expand: true, 
       cwd: 'images-lossy/', 
       src: ['**/*.{png,jpg,gif}'], 
       dest: 'images/' 
      }] 
     }, 

     png: { 
      options: { 
       optimizationLevel: 7 
      } 
     }, 

     jpg: { 
      options: { 
       progressive: true 
      } 
     } 
    } 
}); 

// 3. Where we tell Grunt we plan to use this plug-in. 

// CONCATENATION PLUGIN 
grunt.loadNpmTasks('grunt-contrib-concat'); 
// MINIFY PLUGIN 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
// IMG CRUSH PLUGIN 
grunt.loadNpmTasks('grunt-contrib-imagemin'); 
// GRUNT WATCH PLUGIN 
grunt.loadNpmTasks('grunt-contrib-watch'); 
// SASS LIBARY PLUGIN 
grunt.loadNpmTasks('grunt-contrib-sass'); 

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal. 
grunt.registerTask('default', ['sass','concat', 'uglify', 'imagemin', 'watch']); 

}; 

希望以上信息可以幫助。我以前使用Codekit，它是一個非常棒的應用程序。我想搬到咕嚕，但也許我的配置文件不正確我很接近。

任何幫助將不勝感激。

• 尼爾

Answer 1

它看起來像watch配置中您的兩個問題發生。

首先，在監視期間SASS任務不工作的原因是由於files條目指向錯誤的位置。根據您在實際的「sass」任務中指定的內容，您當前的文件入口指向「css」文件夾，但它應該指向「scss」文件夾。換句話說，您的輸入應該是：files: ['scss/*.scss']。

scripts: { 
    files: ['js/*.js', 'scss/*.scss'], // <-- scss is covered here 
    tasks: ['concat', 'uglify'], 
    options: { 
    spawn: false, 
    } 
} 

將其更改爲files: ['js/*.js'],，而不是有手錶的任務踢在JavaScript文件：

css: { 
    files: ['scss/*.scss'], 
    tasks: ['sass'], 
    options: { 
    spawn: false, 
    } 
} 

其次，因爲你擁有它這裏列出每當SASS文件的變化在值班期間發生的JavaScript縮小隻要。

一旦你解決這些問題，如果事情稍有工作，你可能要展開的模式，使其覆蓋的子目錄中您的JavaScript，CSS，上海社會科學院等。例如，js/*.js包括下的所有文件.js所有文件js文件夾，而js/**/*.js涵蓋js文件夾及其子文件夾。您可以通過GruntJS "globbing patterns"文檔閱讀更多內容。

編輯：這裏是如何更新watch應該看起來像...

watch: { 
    options: { 
     livereload: true 
    }, 

    // css is really for Sass 
    css: { 
     files: ['scss/*.scss'], 
     tasks: ['sass'], 
     options: { 
      spawn: false, 
     } 
    }, 
    // scripts will detect js changes 
    scripts: { 
     files: ['js/**/*.js'], 
     tasks: ['jshint', 'concat', 'uglify'], 
     options: { 
      spawn: false, 
     } 
    } 
}, 

如前所述，您的個人任務可能需要使用類似於我和上面的「腳本」條目做了**模式：js/**/*.js