仅使用Assemble更改了我已更改的页面

时间:2014-10-22 16:21:28

标签: javascript gruntjs grunt-contrib-watch assemble

我一直在使用assemble来创建模式库。我有一个模式作为不同的文件,所有文件都内置在一个文件中。我还有许多页面是HTML的模板。

问题是,如果我在任何文件上改变一件事我必须等待整个事情被渲染,由于我拥有的页数,这需要30秒。你可以想象,这可能会让人感到沮丧,而且我只是整个项目的一半。

有没有人知道如何让Grunt只渲染我改变的页面而不是所有页面?

下面是我的Gruntfile.js:

'use strict';

module.exports = function(grunt) {

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

    concat: {
        dist: {
            src: [
                'vendor/jquery-ui/ui/core.js',
                'vendor/jquery-ui/ui/widget.js',
                'vendor/jquery-ui/ui/accordion.js',
                'vendor/jquery-ui/ui/datepicker.js',
                'javascript/slick/slick.js',
                'vendor/magnific-popup/dist/jquery.magnific-popup.min.js',
                'vendor/heapbox/src/jquery.heapbox-0.9.4.js',
                'vendor/jquery-waypoints/waypoints.js',
                'vendor/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js',
                'javascript/*.js'
            ],
            dest: 'public/javascript/scripts.js'
        }
    },

    uglify: {
        build: {
            src: 'public/javascript/scripts.js',
            dest: 'public/javascript/scripts.min.js'
        }
    },

    copy: {
        main: {
            src: [
                'vendor/jquery/dist/*.js',
                'vendor/prismjs/*',
                'vendor/bigSlide/**',
                'vendor/bigSlide/**',
                'vendor/magnific-popup/dist/*',
                'images/*'
            ],
            dest: 'public/'
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'public/css/style.min.css': 'scss/style.scss'
            }
        },
        expanded: {
            options: {
                style: 'expanded'
            },
            files: {
                'public/css/style.css': 'scss/style.scss'
            }
        }
    },

    watch: {
        all: {
            files: ['*.hbs', 'patterns/*.hbs', 'layouts/*.hbs', 'templates/*.hbs'],
            tasks: ['assemble'],
            options: {
                spawn: false
            }
        },
        css: {
            files: ['scss/*.scss', 'scss/**/*.scss'],
            tasks: ['sass'],
            options: {
                spawn: false
            }
        },
        copy: {
            files: ['images/*', 'vendor/*', 'CHANGELOG'],
            tasks: ['copy'],
            options: {
                spawn: false
            }
        },
        concat: {
            files: ['javascript/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false
            }
        }
    },

    assemble: {
        options: {
            flatten: false,
            plugins: ['assemble-middleware-permalinks'],
            partials: ['patterns/*.hbs'],
            helpers: ['handlebars-helper-compose', 'handlebars-helper-include' ],
            layoutdir: 'layouts',
            layout: 'library.hbs',
            data: ['templates/data/*.{json,yml}'],
            collections: [{
                name: 'patterns',
                inflection: 'pattern'
            }]
        },
        pages: {
            src: ['*.hbs', 'patterns/*.hbs', 'templates/*.hbs'],
            dest: 'public/'
        },
        patterns: {
            options: {
                layout: 'default.hbs'
            },
            files: {
                'public/': ['patterns/*.hbs']
            }
        },
        files: {
            options: {
                layout: 'default.hbs'
            },
            files: {
                'public/': ['templates/*.hbs']
            }
        }
    }

});

// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('assemble');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['copy', 'assemble', 'sass', 'watch']);

};

有人可以帮忙吗?干杯。 史蒂夫

1 个答案:

答案 0 :(得分:0)

您是否尝试过:https://www.npmjs.org/package/grunt-newer

它适用于两种类型的任务:

1)指定src和dest文件的任务。在这种情况下,以较新为前缀的任务将配置为使用比相应的dest文件更新的src文件(基于文件的mtime)运行。

2)仅指定src文件的任务。在这种情况下,以较新为前缀的任务将配置为使用比上一次成功运行同一任务更新的src文件运行。