Question

为什么我的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); 
})

Answer 1

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

});

Answer 2

    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")));

Gulp浏览器刷新SASS

2 个答案: