如何获得与手表一起工作的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任务？

回答

相关问题