I want to monitor the changes of less files, modify the automatic translation of less files and other operations, save once can be translated into css files, but the subsequent operation to other folders is invalid. The following is my gulp configuration file. I don"t know where the configuration is wrong. Now I need to save the less file twice every time, and once it has no effect.
var path = require("path")
var gulp = require("gulp")
var less = require("gulp-less");//gulp-less
var autoprefixer = require("gulp-autoprefixer");//
var gulpSequence = require("gulp-sequence");//
var cleanCSS = require("gulp-clean-css");//
var cssWrap = require("gulp-css-wrap");
var del = require("del");//
var themeValue="3897D3";
gulp.task("testAutoFx", function () {
gulp.src(path.resolve("./customTheme/theme-less/index.less"))
.pipe(autoprefixer({
browsers: ["last 3 versions",
"ie >= 8",
"firefox >= 30",
"chrome >= 34",
"safari >= 6",
"opera >= 12.1"
],
cascade: true, // :true :
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true // :true
}))
.pipe(less())
.pipe(gulp.dest("customTheme/theme-css"));
});
gulp.task("css-wrap-customTheme", function () {
return gulp.src(path.resolve("./customTheme/theme-css/index.css"))/* css */
.pipe(cssWrap({
selector: ".custom-"+themeValue /* */
}))
.pipe(cleanCSS())
.pipe(gulp.dest("src/assets/css/customTheme/"+themeValue)) /* */
});
gulp.task("move-images", function() {
return gulp.src(["./customTheme/theme-less/images/**"])
.pipe(gulp.dest("src/assets/css/customTheme/"+themeValue+"/images"));
});
gulp.task("clean", function (cb) {
return del([
// `mobile`
"src/assets/css/customTheme/"+themeValue,
//
"!src/assets/css/customTheme//README.md"
], cb);
});
//
gulp.task("productCustomTheme", function(cb){
gulpSequence("testAutoFx","css-wrap-customTheme","move-images")(cb);
});
//less
gulp.task("watch1",["clean"], function () {
gulp.watch("customTheme/theme-less/*",["productCustomTheme"]);
});
//gulp
gulp.task("default",["productCustomTheme","watch1"]);