如何让grunt-watch在不同的构建任务下重新加载HTML更改 [英] How to get grunt-watch to live reload HTML changes under different build tasks

问题描述

  watch：{p> 
 
我可以轻松设置我的Grunt文件来重新加载HTML和SCSS更改。 
选项：{
 livereload：true，
}，
 css：{
 files：['scss / *。scss']，
 tasks： ['compass'] 
}，
 html：{
文件：['index.html']，
任务：['build'] 
} 
 
 $ / code> 

然而，我有一个dev环境的构建任务： dev ，以及生产环境的构建任务： build 。因此，当HTML被改变时调用 build 将构建生产站点，如果我只想要开发版本，这不是我想要的。

理想情况下，我会这样做：

  watch：{
 options：{
 livereload：true，
}，
 
 dev：{
 html：{
 files：['< %% = yeoman.app％> / * .html'，
'< %% = yeoman.app％> / ** / *。html']，
任务：['dev'] 
}，
 
 css：{
 files：['< %% = yeoman.app％> / assets / scss / *。scss']，
 tasks：['compass'] 
} 
}，
 
 dist：{
 html：{
 files：['< %% = yeoman.app％> / * .html'，
'< %% = yeoman.app％> / ** / *。html']，
任务：['build'] 
}，
 
 css：{
 files：['< %% = yeom a.app％> / assets / scss / *。scss']，
 tasks：['compass']，
} 
} 
} 
  

因此可以调用 watch：dev 或 watch：dist ，但是这段代码不起作用。

唯一可以解决的办法是：

  ... 
 dev：{
 files：['< %% = yeoman.app％> / * .html'，
'< %% = yeoman.app％> / ** / *。html'，
'< %% = yeoman.app％> / assets / scss / * .scss']，
 tasks：['dev'] 
}，
 
 dist：{
 files：['< %% = yeoman.app ％> / *。html'，
'< %% = yeoman.app％> / ** / *。html'，
'< %% = yeoman.app％> /assets/scss/*.scss']，
 tasks：['build'] 
} 
 ... 
  

再次调用 watch：dev 或 watch：dist ，但下行这是我不希望重建整个网站，当我只是改变少量的SCSS。

有什么方法可以实现我

解决方案

试试动态别名任务：

  grunt.registerTask（'watchit'，function（type）{
 grunt.config（'watch.html.tasks'，type）; 
 grunt.task.run（'watch'）; 
}）; 
  

然后用 grunt watchit：build 或 grunt watchit：dev 在两者之间进行切换。 http://gruntjs.com/frequently-asked-questions#dynamic-alias-tasks

I can easily set up my Grunt file to live reload HTML and SCSS changes by doing something like:

watch: {
    options: {
        livereload: true,
    },
    css: {
        files: ['scss/*.scss'],
        tasks: ['compass']
    },
    html: {
        files: ['index.html'],
        tasks: ['build']
    }
}

However, I have a build task for dev environment: dev, and a build task for production environment: build. Therefore, calling build when the HTML is changed will build the site for production which is not what I want if I only want the dev version.

Ideally I would do something like:

watch: {
    options: {
        livereload: true,
    },

    dev: {
        html: {
            files: ['<%%= yeoman.app %>/*.html',
                    '<%%= yeoman.app %>/**/*.html'],
            tasks: ['dev']
        },

        css: {
            files: ['<%%= yeoman.app %>/assets/scss/*.scss'],
            tasks: ['compass']
        }
    },

    dist: {
        html: {
            files: ['<%%= yeoman.app %>/*.html',
                    '<%%= yeoman.app %>/**/*.html'],
            tasks: ['build']
        },

        css: {
            files: ['<%%= yeoman.app %>/assets/scss/*.scss'],
            tasks: ['compass'],
        }
    }
}

Thereby being able to call watch:dev or watch:dist, however this code does not work.

The only work-around I can figure out is to have:

…
    dev: {
        files: ['<%%= yeoman.app %>/*.html',
                '<%%= yeoman.app %>/**/*.html',
                '<%%= yeoman.app %>/assets/scss/*.scss'],
        tasks: ['dev']
    },

    dist: {
        files: ['<%%= yeoman.app %>/*.html',
                '<%%= yeoman.app %>/**/*.html',
                '<%%= yeoman.app %>/assets/scss/*.scss'],
        tasks: ['build']
    }
…

Again calling watch:dev or watch:dist, but the downside to this is that I don't want to be rebuilding the whole site when I'm just changing a small amount of SCSS.

Is there any way to achieve what I am after?

解决方案

Try a dynamic alias task:

grunt.registerTask('watchit', function(type) {
  grunt.config('watch.html.tasks', type);
  grunt.task.run('watch');
});

Then call it with grunt watchit:build or grunt watchit:dev to switch between the two.

More info here: http://gruntjs.com/frequently-asked-questions#dynamic-alias-tasks

这篇关于如何让grunt-watch在不同的构建任务下重新加载HTML更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！