gulp命令执行一次无效果,需要执行两次

发布于 2022-09-11 16:51:29 字数 2208 浏览 14 评论 0

我要监听less文件的变化,修改完less文件自动转译和别的操作,保存一次可以转译成css文件,但是后续放到别的文件夹操作无效。下面是我的gulp配置文件,不知道哪里配置错误了,现在每次改完less文件需要保存两次才行,一次无效果。

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']);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文