在 XAMPP 上运行的 GRUNT + LESS + BROWSERSYNC

Posted 2023-02-25

【中文标题】在 XAMPP 上运行的 GRUNT + LESS + BROWSERSYNC

【英文标题】：GRUNT + LESS + BROWSERSYNC running on XAMPP

【发布时间】：2015-05-25 15:13:48

【问题描述】：

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】：

这是我的设置

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",
            
        
    
);

【讨论】：

我会测试一下，你的设置正常吗