标签: grunt-contrib-watch

我是新手使用gruntjs和nodejs.我想知道如何设置gruntfile,以便它使用watch监视sass文件和js文件编译.

这是我到目前为止:

module.exports = function ( grunt ) {

  "use strict";
  require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    compass: {
      dist: {
        options: {
          config: 'config.rb',
          watch: true
        }
      }
    }
  });

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

};

任何帮助都感激不尽.谢谢!

简短的介绍

我想以高效的方式检测本地git存储库中的本地更改.这意味着检测哪些文件是在本地修改的,还有未修改的文件.必须拾取任何未经修改的更改/文件添加.

我的尝试

到目前为止我得到了什么(要点):https://gist.github.com/kevin-smets/02bda148a5330f350e6b

这是一个可以独立运行或作为git插件运行的脚本.它的作用基本上如下,git status --porcelain每两秒启动一次,解释这个以检查哪些文件被更改.但是,当它运行时,它会持续占用大约8%的CPU.我尝试git --diff-files了各种其他命令,但都导致了高CPU使用率.:(

为什么？

我想将此文件列表提供给grunt监视进程.目前我的代码库大约有15k文件并且还在增长.观看所有这些文件将变得不可能.我已经应用静态过滤器来限制观看的文件数量,但每次我想编辑定义过滤器之外的文件时,手动更改它会变得很麻烦.

一个想法

我的想法是,IntelliJ/WebStorm(我当前的IDE)如何监控GIT存储库？我尝试进入社区版的源代码但是,我无法想出那个:).WebStorm必须以某种方式执行此操作而不会对CPU造成负担,它似乎会在超过一秒或更短的时间内获取这些更改......即使它们是在IDE之外进行的.我想知道GIT中是否有一些事件系统,但我找不到这些行.

谢谢阅读

任何帮助,总是非常感谢!

所以今天是我第一天和jul一起玩gulp和grunt或任何任务跑步者.我到了一个地方,我可以在我的js文件中更改我的代码,然后运行

gulp browserify 

这很好用.然而它很烦人,我想添加一个手表,以便当我对脚本进行任何更改时,它会自动运行浏览器浏览器或其他东西,我不必手动操作.所以这就是我对gulp.js的所作所为

    var gulp = require('./gulp')({


});



gulp.task('watch', function() {
    // Watch .js files
    gulp.watch('jsfolder/**/*.js', ['scripts']);

});
gulp.task('release', ['build']);
gulp.task('build', ['scripts', 'browserify']);
gulp.task('default', ['watch']);

所以当我这样做

gulp watch

当我保存我的更改时,它给了我

14:37:21] Starting 'clean'...
[14:37:21] Finished 'clean' after 3.18 ms
[14:37:21] Starting 'concat'...
[14:37:21] Finished 'concat' after 263 ?s
[14:37:21] Starting 'checksum'...
[14:37:21] Finished 'checksum' after 19 ms
[14:37:21] Starting 'scripts'...
[14:37:21] Finished 'scripts' after 455 ?s
[14:38:41] Starting 'clean'...
[14:38:41] Finished 'clean' after 2.9 ms
[14:38:41] Starting 'concat'...
[14:38:41] Finished …

我对大多数所有这些工具都很陌生(grunt,browserify,handlebars).我设置gruntfile.js为观察几个.js文件的保存,然后自动运行默认的browserify bundle命令.这是我目前的gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('node_modules/grunt/package.json'),
    watch: {
      js: {
        files: ['tvguide.js', 'responsive-tables.js'],
        tasks: ['browserify']
      }
    },
    browserify: {
      js: {
        src: ['responsive-tables.js','tvguide.js'],
        dest: 'bundle.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-handlebars');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.registerTask('default', ['watch', 'browserify']);
};

这很好 - 虽然文件和src可能是多余的.然而,我已经到了充实我的应用程序的地步,我想使用把手进行模板化,许多谷歌搜索带有把手的browserify让我进入了这个npm包hbsfy.该指示说,我只想跑browserify -t hbsfy myscriptusingatemplate.js > bundle.js,我想,当我保存具体到自动拥有该命令运行.js的文件,但我不知道如何使用这两种-o并-t在相同或不同的文件.

我做了一些使用选项对象的尝试,但没有任何结果.任何帮助/建议将不胜感激.

好吧,我已经坚持了两个星期,所以希望这里的其他人遇到过这个问题.我正在尝试使用Grunt来仅复制已更改的文件.我已经看过很多关于如何使用JSLINT和UGLIFY执行此操作的示例,但没有关于如何使用grunt-contrib-copy执行此操作的具体示例.

当您注册监视事件并将文件名传递给复制子任务时,文件名可以访问(我正在将其注销),但文件永远不会正确复制.

我希望它是一件我能忽视的简单事物.有人可以看看我的代码,看看我做错了什么？

//Gruntfile.js:

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    options: {
        base: 'app',
        dist: 'dist',
    },

    copy: {
        changedFiles: {
            expand: true,
            dot: true,
            cwd: '<%= options.base %>',
            src: ['**/*.*'],
            dest: '<%= options.dist %>/'

        }
     },
    watch: {
        options: {
            nospawn: true,
            //debounceDelay: 1000,
        },
        css: {
            files: ['app/css/*.css',
                   'app/js/*.js'
                   ],
            tasks: ['copy:changedFiles'],

        }
    }    

});

grunt.event.on('watch', function(action, filepath, target){
    grunt.log.writeln('target: ', target + '\n filepath: ' + filepath + '\n action: has ' + action);
    grunt.config('copy.changedFiles.src', new …

我打算为我的新项目安装Codeigniter和ReactJS,

我需要知道如何设置项目文件夹和.jsx文件的构建过程为.js

然后将所有.js文件连接起来并缩小为min.js

我正在考虑使用GruntJS

我是Sails和grunt的新手所以我可能会错过这个明显的东西.我试图在文件发生变化时自动在浏览器中刷新我的风帆应用程序.

我启动应用程序,sails lift它在默认端口上运行1337.

我尝试添加options: {livereload:true}到我的grunt-contrib-watch配置,但据我所知,我需要以某种方式将livereload JavaScript注入我的页面？

我尝试使用注入JavaScript grunt-contrib-connect的livereload选项,但似乎只是启动另一台服务器.当我导航到启动的服务器(localhost:8000)时,我只看到文件夹结构.然而,注入了livereload JavaScript.

如果可能的话,我想避免使用livereload Chrome插件.

将livereload JavaScript注入我的Sails应用程序的最佳方法是什么？或者我应该使用像Browsersync这样的其他工具？

谢谢!:)

我似乎无法让ESLint只使用grunt-contrib-watch在更改的文件上运行.

我能用JSHint做到这一点.

任何帮助让ESLint做同样的事情都将非常感激.

我正在尝试使用grunt-newer来查看文件夹中的文件,如果有任何更改,则触发自定义任务.

我的Gruntfile.js中有类似的东西:

grunt.initConfig({
   watch: {
      widgets: {
         files: "/somepath/*.js",
         tasks: ['newer:mycustomtask']
      }
   }
});

grunt.registerTask("mycustomtask", ["description of my task"], function() {
  console.log("me has been triggered");
});

每当我运行"grunt watch"时,我都会输出:

Running "watch" task
Waiting...
File "/somepath/WidgetA.js" changed.
Running "newer:mycustomtask" (newer) task
Fatal error: The "newer" prefix is not supported for aliases

我用Google搜索但没有发现任何相关信息.任何人都知道我怎么能实现这个？我现在需要在我的"customtask"中更改了哪些文件

迁移到El Capitan之后,用户似乎遇到了grunt安装的问题,可能与El Capitan的无根变化有关.特别是,运行grunt --force命令会导致EPERM错误.工作流程如下:

假设已经安装了npm,使用package.json和gruntfile.js导航到grunt目录并调用grunt:

grunt --force

示例Gruntfile.js文件内容:

module.exports = function(grunt) {

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

        concat: {
            // Configuration for concatenating files goes here.
            dist: {
                src: [
                        '../js/libs/owl.carousel.js',
                        '../js/libs/jquery.actual.js',
                        '../js/libs/chosen.jquery.js',
                        '../js/libs/jquery.parallax.js',
                        '../js/src/common.js'  
                ],
                dest: '../js/pro/global.js',
            },
        },

        uglify: {
            build: {
                src: '../js/pro/global.js',
                dest: '../js/pro/global.min.js',
            },
        },


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

        compass: {
            dev: {
                options: {              
                    sassDir: '../sass',
                    cssDir: '../css', …