Gulp浏览器刷新SASS



为什么我的SASS不会在浏览器加载时重新加载-其他工作,除了我的SASS

代码:

var project     = 'project', // Project name, used for build zip.
  url     = 'url', // Local Development URL for BrowserSync. Change as-needed.
  buildInclude  = [
        // include common file types
        '**/*.php',
        '**/*.html',
        '**/*.css',
      ];

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  browserSync = require('browser-sync').create();

//Pre-processing sass files to css
gulp.task('sass', function(){
  return gulp.src('./sass/style.scss')
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('./css'))
  .pipe(browserSync.reload({
      stream: true
    }))
});

//Live re-loading with Borwser sync
gulp.task('browserSync', function() {
  browserSync.init({
    proxy: {
    target: url,
}
  })
})

gulp.task('watch', [ 'sass', 'browserSync'], function(){
  gulp.watch('./sass/style.scss', ['sass']); 
  // Reloads the browser whenever HTML or php files change
  gulp.watch('*.html', browserSync.reload); 
  gulp.watch('*.php', browserSync.reload); 
  gulp.watch('*.css', browserSync.reload); 
})
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
/**
--Top level function--
  gulp.task = Define task
  gulp.src = Point topfiles to use
  gulp.dest = Points to folder to output
  gulp.watch = watch files and folder for change
**/
//Log message
gulp.task('message', () =>
  console.log("gulp is running... ")
);
//optimise images
gulp.task('imageMin', () =>
 gulp.src("images/**/*")
 .pipe(imagemin())
 .pipe(gulp.dest("img_min"))
);

//compile sass
gulp.task('sass',() =>
  gulp.src("sass/**/*.scss")
  .pipe(sass().on('error',sass.logError))
  .pipe(gulp.dest("css"))
);
//concatinate and minify js
gulp.task('script',()=>
   gulp.src("js/**/*.js")
   .pipe(concat("script.js"))
   .pipe(uglify())
   .pipe(gulp.dest("js"))
  );
//all task in this file
gulp.task('default',['message', 'imageMin', 'sass', 'script']);
//watch command
gulp.task('watch', ['message', 'imageMin', 'sass', 'script'], function() {
 gulp.watch("images/**/*",['imageMin']);
 gulp.watch("sass/**/*.scss",['sass']);
 gulp.watch("js/**/*.js",['script']);
});
    in gulpfile.js if you wants to create a 
sass task then initialised that task first like this
    //initialised sass variable which require 'gulp-sass'
    const sass = require('gulp-sass');
    //create gulp task with variable name:
    gulp.task('sass',function() {
     return gulp.src("source of sass file")
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest("source url of destination folder,i.e css folder")));

最新更新