2017-01-09 5 views
3

CSSをコンパイルする際に問題があります。複数回試行した直後にSASSファイルを変更しても最終ファイルは変更されません。スタイルの変更を得るためにgulpを複数回実行する必要があります

 

    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に従ってすべてを使いましたが、何が起こっているのか分かりませんでした。

+0

あなたはgulpドキュメントに従ってすべてを実行しませんでした。非同期完了のセクションをお読みください。 –

+0

今私は、それが完了したときに最初にヒントを与える必要があるので、実際にスクリプトが完了したら理解する必要があります。ありがとう@SvenSchoenung –

答えて

4

私はそれが次のタスクを呼び出す必要があるときガルプが、私が一口を理解させるためにストリームを使用Gulp Docs

に記載されます理解すること、それが行われたときのリターンを行方不明になったときに、このような各タスクの終了、:

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

エラーまたは最終コードはどこにあるのか明確にすることはできますか? – Billeeb

+1

回答を編集しました@Billeeb –

+0

Thanks @ marcelo-formentão!!! – Billeeb

関連する問題