在XAMPP上运行GRUNT + LESS + BROWSERSYNC

时间:2015-03-22 16:00:37

标签: wordpress gruntjs xampp less browser-sync

我对Grunt的 BrowserSync版本有一个大问题。

问题: 如果我编辑.php文件 - BrowserSync工作正常,但如果我编辑.less文件,没有任何事情发生,但在bash我仍然可以看到:

  

[BS]文件已更改:d:\ localhost \ htdocs \ www \ wordpress \ wp-content \ themes \ MYPROJECTNAME \ css \ main.css

有人可以帮我正确设置: 在XAMPP上运行GRUNT + LESS + BrowserSync(因为WordPress)?

我的gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        // Watch task config
        watch: {
            less: {
                files: ['less/**/*.less'],
                tasks: ['less']
            }
        },
        // less task config
        less: {
            dev: {
                files: {
                    "/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/css/main.css" // destination
                    :
                    "less/main.less" // source file
                }
            }
        },
        // Using the BrowserSync Proxy for your existing website url.        
        browserSync : {
            dev : {
                bsFiles : {
                    src : [
                    '/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/**/*.php',
                    '/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/images/*.*', 
                    '/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/_dev/less/**/*.less', 
                    '/localhost/htdocs/www/wordpress/wp-content/themes/MYPROJECTNAME/**/*.css', 
                    ]
                },
                options : {
                    watchTask: true,
                    debugInfoě: true,
                    logConnections: true,
                    notify: true,
                    proxy: "localhost/www/wordpress",
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');

    // register a default task.
    grunt.registerTask('default', ['less', 'browserSync', 'watch']);
};

谢谢大家! : - )

1 个答案:

答案 0 :(得分:1)

  

这是我的设置

var root =' localhost / htdocs / www / wordpress / wp-content / themes / MYPROJECTNAME /';

  browserSync : {
        dev : {
            options : {
                files: [root+'style.css',
                        root+'js/**/*.js',
                        root+'**/*.php'],
                watchTask: true,
                debugInfoe: true,
                logConnections: true,
                notify: true,
                proxy: "localhost/www/wordpress",
            }
        }
    }
});