你如何改變一個WordPress主題，使用Grunt的JS文件？

Question

我想改變我使用的WordPress主題中的JS文件。主題使用Grunt來打包所有的CSS和JS文件。我以前從未使用Grunt，所以我想知道如何更新一些JS文件。

有沒有簡單的方法來做到這一點？

從我的在線研究，似乎我需要安裝一個包到我的服務器 - 這是正確的嗎？任何方向或幫助非常感謝。我貼在主題使用的Grunt.js文件下面。

module.exports = function(grunt) { 

    // Project configuration. 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     uglify: { 
      dist: { 
       files: { 
        'js/vendor-min.js': [ 
         'js/jquery.mixitup.js', 
         'js/jquery.stapel.js', 
         'js/owl.carousel.js', 
         'js/jquery.magnific-popup.js', 
         'js/modals.js', 
         'js/auth.js', 
         'js/jquery.mousewheel.js', 
         'js/jquery.mCustomScrollbar.js', 
         'js/placeholder.js', 
         'extensions/mail_subscription/js/mail_subscription.js', 
         'js/plugins.js', 
         'js/theme.js' 

        ], 
        'js/widgets/min/jflickrfeed.min.js': [ 
         'js/widgets/jquery.jflickrfeed.js' 
        ] 
       } 
      } 
     }, 
     watch: { 
      scripts: { 
       files: [ 
        'js/*.js', 
        'extensions/mail_subscription/js/*.js' 
       ], 
       tasks: ['uglify'] 
      }, 
      styles: { 
       files: [ 
        '**/*.scss' 
       ], 
       tasks: ['compass'] 
      } 
     }, 
     jshint: { 
      files: [ 
       'js/theme.js' 
      ], 
      options: { 
       globals: { 
        jQuery: true 
       } 
      } 
     } 

    }); 

    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.loadNpmTasks('grunt-contrib-jshint'); 

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

}; 

Answer 1

我建議您需要先安裝項目的依賴關係，然後您可以使用Grunt任務來編譯資產。您需要安裝NodeJS和Grunt-cli（npm install -g grunt-cli）。

1. cd到主題目錄
2. 運行npm install（這將安裝主題的所有依賴）
3. 運行grunt watch（這將開始咕嚕看更改的文件）
4. 編輯JS/CSS文件，而grunt watch任務正在運行，並且當您保存時應該會看到JS/CSS重新編譯

如果您不希望h ave grunt watch一直運行，您可以單獨手動運行grunt uglify,grunt jshint和grunt compass任務。