当前位置:  开发笔记 > 编程语言 > 正文

必须多次运行gulp以获得Style更改

如何解决《必须多次运行gulp以获得Style更改》经验,为你挑选了1个好方法。

我在编译我的CSS时遇到问题,当我在我的SASS文件中进行更改时,它不会在尝试多次之后更改最终文件.


    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var rename = require('gulp-rename');
    var postcss = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');
    var cssnano = require('cssnano');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');

    //CSS Tasks
    gulp.task('styles', function() {
        console.log("Compilling SASS");
        gulp.src('app/sass/style.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([ autoprefixer() ]))
        .pipe(rename('999_style.css'))
        .pipe(gulp.dest('app/css/'));
    });
    gulp.task('stylescompress', ['styles'], function() {
        console.log("Concating and moving all the css files in styles folder");
        gulp.src("app/css/**.css")
        .pipe(concat('style.css'))
        .pipe(postcss([ cssnano() ]))
        .pipe(gulp.dest('css/'));
    });

    //Javascript Tasks
    gulp.task('jscompress', function() {
        //console.log("Concating and moving all the js files in javascript folder");
        gulp.src("app/js/**.js")
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('js/'))
        .pipe(rename('scripts.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js/'))
    });

    //Watch task
    gulp.task('default',function() {
        gulp.watch(['app/sass/**/*.scss'],['stylescompress'])
        .on('change', function(event) {
            console.log('SASS - File ' + event.path + ' was ' + event.type + ', running tasks...');
        });
        gulp.watch(['app/js/**/*.js'],['jscompress'])
        .on('change', function(event) {
            console.log('SCRIPTS - File ' + event.path + ' was ' + event.type + ', running tasks...');
        });
    });

正如你所看到的,我根据Gulp Docs使用了所有内容,但我没有发现发生了什么.



1> Marcelo Form..:

我错过了它完成时的回归,让Gulp理解它何时应该调用下一个任务,它记录在Gulp Docs中

当每个任务结束时,我使用流来让gulp了解,如下所示:

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

推荐阅读
Life一切安好
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有