标签: grunt-contrib-watch

我的Gruntfile有一些意想不到的行为.我已经注册了一个看起来像这样的任务:grunt.registerTask('dev', ['jekyll:server', 'watch:jekyll'])希望它会顺序启动一个jekyll服务器,然后观察我的项目是否有特定的文件更改(使用grunt-contrib-watch插件).一旦检测到这些更改,它就会jekyll:server自动重新运行.

我遇到的问题是,当我运行时grunt dev,它将启动Jekyll服务器,但它不会运行watch命令.但是,如果我从中删除服务器任务grunt dev,它将watch按预期运行该命令.

以下是我的Gruntfile的内容.谁能帮我理解发生了什么？

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({

    jekyll: {
      server : {
        server: true,
        server_port: 4000,
        exclude: ['node_modules']
      },
      prod: {
        dest: './_site-release'
      }
    },

    watch: {
      jekyll: {
        files: ['_posts/**/*.md', '_layout/*.html', '_includes/*.html', 'index.html'],
        tasks: ['jekyll:server']
      }
    }
  });

  grunt.loadNpmTasks('grunt-jekyll');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', 'jekyll:server');
  grunt.registerTask('dev', ['jekyll:server', 'watch:jekyll']);
  grunt.registerTask('release', 'jekyll:prod');
};

我正在使用Grunt用罗盘编译我的CSS并触发浏览器livereload.这些是我的观察任务:

watch: {
    styles: {
        options: {
            spawn: false,
        },
        files: [assetsDir + '/**/*.scss', '!**/*.{dev,min}.scss'],
        tasks: [
            'concat:styles',
            'compass:styles',
            'imagemin:styles',
            'cssmin:styles',
            'clean:styles',
        ],
    },
    scripts: {
        options: {
            spawn: false,
        },
        files: [assetsDir + '/**/*.js', '!**/*.{dev,min}.js'],
        tasks: [
            'concat:scripts',
            'uglify:scripts',
        ],
    },
    livereload: {
        options: {
            livereload: true,
            spawn: false,
        },
        files: [assetsDir + '/**/*.{dev,min}.{css,js}'],
    },
},  

目前,在样式任务完全完成之前,livereload任务不会触发,但是imagemin可能会增加一些重要的延迟,而我真正关心的是CSS,只要指南针完成就可以使用了.

如何在指南针完成后立即触发livereload,但允许其他任务继续进行？我尝试了下面的配置,当CSS改变时触发imagemin,但它似乎不起作用.由于某种原因,这个imagemin根本不会触发.你能不能看到同一个文件的多个任务吗？

watch: {
    styles: {
        options: {
            spawn: false,
        },
        files: [assetsDir + '/**/*.scss', '!**/*.{dev,min}.scss'],
        tasks: [
            'concat:styles',
            'compass:styles',
            'cssmin:styles',
            'clean:styles',
        ], …

我试图使用两者grunt-express-server,grunt-contrib-watch然而,一旦我的快递服务器启动,它似乎不再做任何观看或重新加载.我有服务器设置在后台生成.我的项目在这里:https://github.com/RyanHirsch/firem

这是我的Gruntfile.js

module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);
  // Project configuration.
  grunt.initConfig({
    watch: {
      options: {
        livereload: true,
      },
      express: {
        files:  [ 'index.html', 'server.js' ],
        tasks:  [ 'express:dev' ],
        options: {
          spawn: false
        }
      }
    },
    express: {
      options: {
        // Override defaults here
      },
      dev: {
        options: {
          script: 'server.js'
        }
      }
    }
  });

  grunt.registerTask('default', ['express:dev','watch']);
};

当我执行clean任务(grunt clean)时,一切都按预期工作,但是当我运行监视任务(grunt test)时,我收到以下错误:

util.js:35
  var str = String(f).replace(formatRegExp, function(x) {
                  ^
RangeError: Maximum call stack size exceeded

这是我的gruntfile

module.exports = (grunt) ->

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

    clean: ['tmpDir/']

    watch:
      options:
        spawn: false
      src:
        tasks: ['clean']
        files: [
          src: 'client/assets/strings/en/str.coffee'
        ]

  # plugins
  grunt.loadNpmTasks('grunt-contrib-clean')
  grunt.loadNpmTasks('grunt-contrib-watch')

  # tasks
  grunt.registerTask('test', ['watch'])

这是我的package.json文件:

{
  "author": "Your Name <Your Email>",
  "name": "app-name",
  "description": "Application description",
  "version": "0.0.1",
  "homepage": "",
  "repository": {
    "type": "git",
    "url": ""
  },
  "engines": {
    "node": "~0.10.28"
  },
  "scripts": {
    "start": "muffin server" …

我设置了这个.

http://www.zell-weekeat.com/grunt-sass-with-susy/

它可以正常运行一次,如果我退出sass手表我无法释放端口.

Fatal error: Port 35729 is already in use by another process.

然后

sudo lsof -i :35729

给

\COMMAND   PID   USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
grunt   26305 author   12u  IPv6 7064373      0t0  TCP *:35729 (LISTEN)

如何让这个端口释放

我正在尝试使用Grunt的grunt-contrib-watch插件来观看一些文件，然后运行任务，正是它的目的，这就是我的Gruntfile.js

module.exports = function(grunt){
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            options: {
                sourceMap: true,
                outputStyle: 'compressed'
            },
            dist: {
                files: {
                    'static/stylesheets/main.min.css': 'static/stylesheets/sass/main.scss',
                    /*'bower_components/foundation-sites/dist/foundation.min.css': 'bower_components/foundation-sites/scss/foundation.scss'*/
                }
            }
        },
        uglify: {
            dist: {
                files: {
                    'static/javascript/main.min.js': 'static/javascript/main.js'
                }
            }
        },
        watch: {
            files: [
                '<%= sass.dist.files %>',
                '<%= uglify.dist.files %>'
            ],
            tasks: [
                'sass',
                'uglify'
            ]
        }
    });

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

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

当我运行它时，它一遍又一遍地运行，当我停止它时，我看到以下消息：

正在运行“监视”任务等待中……警告：pattern.indexOf不是函数

我真的不知道出什么问题了。有人知道这里会发生什么吗？

更新：

显然，问题出在我调用文件的方式上，因为我将其更改为：“ static / stylesheets / sass / *。scss”，而且效果很好，但是我想知道为什么其他方式不起作用，因为我认为这是一种更有用的方法。

所以我有5个grunt-contrib-watch任务:

• sass编译sass文件
• testConcat进行concat测试
• implementationConcat用于concat实现文件的测试
• 用于预编译车把模板的模板
• 业力开始业力测试运行

我知道grunt watch会看到所有这些,但我真的需要将它们分成两组 - 前四个用于我的设计师运行静态服务器并执行sass工作,最后两个用于我在做js工作的时候.

我正在使用grunt-concurrent它们将它们分开并同时运行它们,但是虽然这有效,但它似乎有点像黑客.我错过了什么吗？

我正在努力工作,使用grunt-contrib-watch和grunt-contrib-compass.

到目前为止,我的Gruntfile看起来像这样:

module.exports = function (grunt){

    grunt.initConfig({

    compass : {

        dist : {
        options : {
            debugInfo : 'true'          
        }

        }

    },

    watch : {       
        files : ['*.html', 'js/*', 'sass/*'],
        task : ['compass'],
        options : {
        livereload: true,
        port : 35729
        }       
    }

    });


    grunt.loadNpmTasks('grunt-contrib-watch') ;
    grunt.loadNpmTasks('grunt-contrib-compass') ;

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

} ;

我正在使用chromes live-reload扩展.

如果我然后运行'grunt -v',我可以看到grunt按预期监视我的html和我的sass文件.我的浏览器选项卡会按预期自动重新加载.

在浏览器选项卡中,我转到此地址:

http://localhost:35729

但是,在我的浏览器中,我只在加载和重新加载时看到这个:

{
tinylr: "Welcome",
version: "0.0.4"
}

我没有看到我的index.html.只是对象.

为了查看我的网站,我需要做什么？

我正在尝试设置grunt将我的sass编译成css.

我实际上有它的工作,但问题(我认为)是我的grunt文件结构的方式,它是编译监视任务中的每个scss文件,而不仅仅是导入所有其他scss文件的基本scss文件.因此,即使它们没有被使用,编译后的.css文件也会在未定义变量的错误中使用丑陋的backtrace语句,而且我认为grunt运行速度要慢得多,因为它将每个sass文件编译成css文件,而不仅仅是一个基本文件.

我想要发生的是grunt识别watch任务中任何scss文件的更改,但只编译基本scss文件.下面是我的基本scss文件,以及我的grunt文件的摘录:

base.scss:

@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "toolkit-no-css";


@import "variables/**/*";
@import "abstractions/**/*";
@import "base/**/*";
@import "components/**/*";
@import "pages/*";

gruntfile:

module.exports = function (grunt) {

  grunt.initConfig({
    watch: {
      sass: {
        files: ['sass/{,**/}*.{scss,sass}'],
        tasks: ['compass:dev'],
        options: {
          livereload: false
        }
      },
      css: {
        files: ['css/{,**/}*.css']
      }
    },
    compass: {
      options: {
        config: 'config.rb',
        bundleExec: true,
        force: true
      },
      dev: {
        options: {
          environment: 'development'
        }
      },
      dist: {
        options: {
          environment: 'production'
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass'); …

我们正在尝试Vagrant.我们在主机上通过NFS与guest虚拟机共享一个Web应用程序目录.在开发网站时,我们很快就开始遇到问题.

我们正在运行gulp-watch来查看样式表和javascript文件的更改并运行任务,但是最多一分钟内没有获取更改.

此外,Laravel没有注意到刀片模板正在被更改,因此没有重新编译它们,并且正在显示旧的视图模板.

我最终将问题归结为一个非常简短的PHP脚本来演示错误.

<?php
header('Content-Type: text/plain');
$file = 'test.html';

echo "modified: " . date('r', filemtime($file)) . "\n";
echo "contents: " . file_get_contents($file) . "\n";

这将获得另一个文件的修改时间test.html并输出其内容.这给了奇怪的行为.当test.html通过主机更改(增加其全部内容,单个整数)然后刷新页面时,它将按预期工作(新文件修改日期和新文件内容)或文件的内容将更新但文件修改日期不会.在点击刷新时,修改日期将赶上.这是后一种情况的一个例子.

我后来发现,如果切换"修改"和"内容"行以便在查看修改日期之前检索内容,我每次都会得到预期的输出.

问题是导致这种情况的原因以及我们如何解决这个问题,是否与观察文件变更的问题有关？