Question

我是一个小小的新人。我有一个旧的Wordpress主题，我试图使用gulp来编译LESS文件。我的结构是这样的：

-theme
--library
---less
----style.less (all the imports all of the less files)
----brew (all the less files are in this folder)
---css
----style.css (this is the compiled css file)
-gulp-dev
--node_modules
--gulpfile.js
--package.json

这是我的gulpfile：

var gulp = require('gulp');
var less = require('gulp-less'); 
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;


/* Task to compile less */
gulp.task('compile-less', function() {  
  gulp.src('../theme/library/less/style.less')
    .pipe(less())
    .pipe(gulp.dest('../theme/library/css/'));
}); 
/* Task to watch less changes */
gulp.task('watch-less', function() {  
  gulp.watch('../theme/library/less/**/*.less' , ['compile-less']);
});

gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({ 
      open: 'external',
      proxy: 'wordpress.localhost:8080',
      port: 8080
    }); 
    gulp.watch('../theme/library/less/**/*.less').on("change", reload);
});

/* Task when running `gulp` from terminal */
gulp.task('default', ['watch-less', 'serve']);

这似乎工作正常。我运行gulp并启动Browsersync并开始观看我的LESS文件。我对其中一个LESS文件进行了更改，它跟踪更改并进行编译，更改显示在本地网站上。一切正常。问题是，下次我进行更改并保存时，gulp告诉我，看到保存并再次编译文件，但更改不会出现在文件中。在我做出第一次更改后，style.css中没有任何内容发生变化。如果我关闭gulp然后再次运行它，它会编译第一次更改的LESS，但之后不会再次执行。

如果我在sublimetext中打开已编译的css文件，我会在重新编译时看到它刷新...但是这些更改都没有显示出来。

这里有什么想法？

Gulp仅在我第一次运行时编译LESS。它仍然可以看到我的更改，但不会更新已编译的CSS文件

0 个答案: