如何獲得與手錶一起工作的grunt serve任務？

我最近安裝了並啓動了它，但似乎無法使其與我的手錶任務同時運行？在我的grunt文件中，如果在觀看之前註冊服務任務，則服務器將啓動，但監視任務不會......反之亦然。這是服務包和即時通訊使用咕嚕文件附：如何獲得與手錶一起工作的grunt serve任務？

https://www.npmjs.com/package/grunt-serve

module.exports = function(grunt) { 

    // 1. All configuration goes here 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 

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

     uglify: { 
      options: { 
       mangle: false 
      }, 
      my_target: { 
       files: { 
       'js/build/production.min.js': ['js/build/production.js'] 
       } 
      } 
      }, 

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

     sass: { 
      //options: { 
      // style: 'compressed' 
      //}, 
      dist: { 
       files: [{ 
       expand: true, 
       cwd: 'css', 
       src: ['*.scss'], 
       dest: 'css/build/', 
       ext: '.css' 
       }] 
      } 
      }, 

     serve: { 
      options: { 
       port: 9000 
      } 
     }, 

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



    }); 

    // Load all Grunt tasks automatically wihtout having to enter manaually 
    require('load-grunt-tasks')(grunt); 

    grunt.registerTask(
     'default', 
      [ 
       'concat', 
       'uglify', 
       'sass', 
       'serve', 
       'watch' 
      ] 
    ); 

};

來源

2017-02-17 JohnAsp

咕嚕serve和咕嚕watch都封鎖任務。您可以使用像grunt-concurrent這樣的插件同時在不同的線程中運行。 https://github.com/sindresorhus/grunt-concurrent

concurrent: { 
    target1: ['serve', 'watch'], 
} 

//aslo update your default task 
grunt.registerTask(
    'default', 
     [ 
      'concat', 
      'uglify', 
      'sass', 
      'concurrent:target1' 
     ] 
);

此外，您也可以使用grunt-concurrent在其中可以改善編譯時間並行運行你的醜化和青菜任務。

來源

2017-02-18 19:33:29 Revive

Gruntfile.js

刪除無論從defaultgrunt.registerTask()在serve和watch任務別名您Gruntfile.js所以它的內容如下：

... 

grunt.registerTask('default', [ 
    'concat', 
    'uglify', 
    'sass' 
]); 

...

如果你也想觀看index.html再加入一個新的Target調用html到您現有的watch任務如下：

.... 

watch: { 
    // Keep your current 'options' and both 
    // the 'css' and 'scripts' Targets here. 
    // ... 

    html: { 
     files : ['./index.html'] //<-- Change the path as necessary. 
    } 
} 

....

的index.html

確保index.html包括作爲文檔here解釋您的交易</body>標記之前以下<script>標籤，但是，這個，如果你使用的瀏覽器擴展是沒有必要的：

<script src="//localhost:35729/livereload.js"></script>

同時運行grunt watch和serve

打開您的CLI工具並在兩個工程文件夾中創建兩個會話和cd。

在會話中的一個運行$ grunt創建初始構建，其次是$ grunt serve啓動本地服務器。
在會話二中運行$ grunt watch開始觀察文件以進行更改。
訪問localhost:9000
編輯您的文件。

來源

2017-02-18 20:24:00 RobC

如何獲得與手錶一起工作的grunt serve任務？

回答

相關問題