जब मैं अपनी एसएएस फ़ाइल बदलता हूं तो मैं पुनः लोड देखने के लिए अपनी गल्पफाइल प्राप्त करने की कोशिश कर रहा हूं। वर्तमान में मुझे टर्मिनल में gulp cmd को बंद करना होगा और इसे काम करने के लिए रीफ्रेश करना होगा।
मुझे यहां क्या समझ नहीं आ रहा है?
अग्रिम में धन्यवाद!
let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync').create();
gulp.task('styles', function() {
gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('serve', function () {
browserSync.init({
server: {
baseDir: './app'
}
});
gulp.watch('app/scss/*.scss', ['styles']);
gulp.watch('app/**/*.html').on('change', browserSync.reload)
});
gulp.task('default', ['styles', 'serve']);
1
Jasmine Ibikunle
9 पद 2018, 03:49
1 उत्तर
सबसे बढ़िया उत्तर
यदि आप गल्प 4 का उपयोग कर रहे हैं। इस कोड का उपयोग करें:
let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync');
gulp.task('styles', function() {
return gulp.src('app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css')) //removed semicolon
.pipe(browserSync.reload({ stream:true }));
});
// watch Sass files for changes, run the Sass preprocessor with the 'sass' task and reload
gulp.task('serve', gulp.series('styles', function() {
browserSync({
server: {
baseDir: './app'
}
});
gulp.watch('app/scss/*.scss', gulp.series('styles'));
gulp.watch('app/css/*.css', browserSync.reload);
gulp.watch('app/**/*.html', browserSync.reload);
}));
यदि आप पुराने गल्प का उपयोग कर रहे हैं:
let gulp = require("gulp");
let sass = require("gulp-sass");
let browserSync = require("browser-sync").create();
let runSequence = require('run-sequence'); // npm install run-sequence --save-dev
gulp.task("styles", function () {
gulp
.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
// Static server
gulp.task("serve", function () {
browserSync.init({
server: {
baseDir: "./"
}
});
});
//watch for files changes
gulp.task('watch', ['styles', 'serve'], function () {
// sass files changes
gulp.watch('app/scss/*.scss', ['styles']);
// CSS files changes
gulp.watch('app/css/*.css', browserSync.reload);
// html files changes
ulp.watch('app/**/*.html', browserSync.reload)
});
// The default task (called when you run 'gulp' from cli)
gulp.task('default', function (callback) {
runSequence(['styles', 'serve', 'watch'],
callback
)
})
0
Seyed Abbas Seyedi
10 पद 2018, 12:30