javascript – Grunt:看多个文件,只编译改变 – livereload break?

我是Grunt和 Javascript / Coffeescript的新手.

我们在一个包含数百个.coffee文件的大型项目中使用Grunt.由于Grunt编译了所有的咖啡文件(尽管只有一个文件已经更改),我最初的问题是如何让Grunt只编译一个更改的文件.
使用stackoverflow我能够回答这个问题,谢谢大家:)

但现在似乎已实施的解决方案打破了实时重载.当我从“grunt服务器”开始并在浏览器中显示我的页面时,一切看起来都很好.然后我更改一个.coffee文件并保存.文件被编译(我已检查),但我的浏览器从未被重新加载.只有当我手动重新加载浏览器时,才会显示新修改的代码.

所以问题是:为什么livereload不再有效?

我不知道这是否重要,但Gruntfile是在旧版本中使用yeoman创建的(使用grunt-regarde).我使用grunt-contrib-watch和buildin livereload将package.json和Gruntfile更新为更新的规范.没有grunt.event.on一切正常.

来源(部分):

grunt.initConfig({

    watch: {
            coffee: {
                files: ['<%= yeoman.app %>/coffeescripts/**/*.coffee'],tasks: ['coffee:app'],options: {
                    nospawn: true
                },},compass: {
                files: ['<%= yeoman.app %>/styles/**/*.{scss,sass}'],tasks: ['compass']
            },templates: {
                files: ['<%= yeoman.app %>/templates/**/*.tpl'],tasks: ['handlebars']
            },livereload: {
                options: {
                    livereload: LIVERELOAD_PORT
                },files: [
                    '<%= yeoman.app %>/*.html','<%= yeoman.tmp %>/styles/**/*.css','<%= yeoman.tmp %>/scripts/**/*.js','<%= yeoman.tmp %>/spec/**/*.js','<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,webp}',]
            }
        },coffee: {
            app: {
                expand: true,cwd: '<%= yeoman.app %>/coffeescripts',src: '**/*.coffee',dest: '<%= yeoman.tmp %>/scripts',ext: '.js',options: {
                    runtime: 'inline',sourceMap: true
                },}
        }
    }
});

grunt.event.on('watch',function(action,filepath) {
    filepath = filepath.replace(grunt.config('coffee.app.cwd')+'/','' );
    grunt.config('coffee.app.src',[filepath]);
});

grunt.registerTask('server',function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build','open','connect:dist:keepalive']);
    }

    grunt.task.run([
        'clean:server','coffee','compass:server','symlink:bower','connect:livereload','handlebars','notify:watch','watch'
    ]);
});

grunt-contrib-watch与版本v0.4.4一起使用,
connect-livereload与版本0.2.0

解决方法

我的解决方案
grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),cssmin: {
            dist: {
                expand: true,cwd: 'app',src: ['**/*.css'],dest: 'WebContent'
            }
        },uglify: {
            options: {
                mangle: false
            },dist: {
                expand: true,cwd: 'app/js',src: ['**/*.js'],dest: 'WebContent/js'
            }
        },htmlmin: {
            options: {
                collapseWhitespace: true
            },src: ['**/*.html'],watch: {
            options: {
                spawn: false
            },cssmin: {
                files: 'app/css/**/*.css',tasks: ['cssmin']
            },uglify: {
                files: 'app/js/**/*.js',tasks: ['uglify']
            },htmlmin: {
                files: 'app/**/*.html',tasks: ['htmlmin']
            }
        },});

    // Faz com que seja salvo somente o arquivo que foi alterado
    grunt.event.on('watch',filepath) {
        var tasks = ['cssmin','uglify','htmlmin'];

        for (var i=0,len=tasks.length; i < tasks.length; i++) {
            var taskName = tasks[i];

            if (grunt.file.isMatch(grunt.config('watch.'+ taskName +'.files'),filepath)) {
                var cwd = new String(grunt.config(taskName + '.dist.cwd')).split('/').join('\\') + '\\'; //inverte as barras e adiciona uma "\" no final
                var pathWithoutCwd = filepath.replace(cwd,''); //obtem somente o path sem o cwd

                grunt.config(taskName + '.dist.src',pathWithoutCwd); //configura a task
            }   
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');

    // Tarefas padrão
    grunt.registerTask('default',['cssmin','htmlmin']);
};

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)