Question

希望有一种可以帮助我的鞋底。我一直在编码宽度gulpbrowsersync但它突然停止工作。我有note.js和npm安装并运行本地宽度MAMP。

Gulp browsersync将不再自动编写代码。 watch函数可以工作，每次我更改header.scss文件中的代码时它都会在浏览器中重新上传，但是我的style.css文件没有写入任何更改。这是我的gulp文件。谁知道什么可能是错的？

var themename = 'humescores';

var gulp = require('gulp'),
    // Prepare and optimize code etc
    autoprefixer = require('autoprefixer'),
    browserSync = require('browser-sync').create(),
    image = require('gulp-image'),
    jshint = require('gulp-jshint'),
    postcss = require('gulp-postcss'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),

    // Only work with new or updated files
    newer = require('gulp-newer'),

    // Name of working theme folder
    root = '../' + themename + '/',
    scss = root + 'sass/',
    js = root + 'js/',
    img = root + 'images/',
    languages = root + 'languages/';


// CSS via Sass and Autoprefixer
gulp.task('css', function() {
    return gulp.src(scss + '{style.scss,rtl.scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'expanded', 
        indentType: 'tab',
        indentWidth: '1'
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer('last 2 versions', '> 1%')
    ]))
    .pipe(sourcemaps.write(scss + 'maps'))
    .pipe(gulp.dest(root));
});

// Optimize images through gulp-image
gulp.task('images', function() {
    return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
    .pipe(newer(img))
    .pipe(image())
    .pipe(gulp.dest(img));
});

// JavaScript
gulp.task('javascript', function() {
    return gulp.src([js + '*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest(js));
});


// Watch everything
gulp.task('watch', function() {
    browserSync.init({ 
        open: 'external',
        proxy: 'http://localhost/wordpress/',
        port: 8080
    });
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
    gulp.watch(js + '**/*.js', ['javascript']);
    gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
    gulp.watch(root + '**/*').on('change', browserSync.reload);
});


// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);

Answer 1

我遇到了同样的问题，但是我设法找到了一种解决方案，方法是在Gulpfile.js中添加这样的正斜杠来注释这一行

//sass = require('gulp-sass'),

然后在Gulpfile.js中添加以下代码：

var themename = 'humescores';

var gulp = require('gulp'),
    // Prepare and optimize code etc
    autoprefixer = require('autoprefixer'),
    browserSync = require('browser-sync').create(),
    image = require('gulp-image'),
    jshint = require('gulp-jshint'),
    postcss = require('gulp-postcss'),
    //sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),

    // Only work with new or updated files
    newer = require('gulp-newer'),

    // Name of working theme folder
    root = '../' + themename + '/',
    scss = root + 'sass/',
    js = root + 'js/',
    img = root + 'images/',
    languages = root + 'languages/';


//----------------------------------------------------------------------------------------------------
//  ADDED FROM ANOTHER GULPFILE.JS PROJECT AND INSERTED INTO THIS ONE----------
//----------------------------------------------------------------------------------------------------

gulp.task('sass', function() {
   return gulp.src('assets/sass/**/*.scss')
   .pipe(sourcemaps.init())
   .pipe(autoprefixer({
      browsers: ['last 2 version'],
      cascade: false
   }))
   .pipe(sass({
      outputStyle: 'uncompressed'
   })
   .on('error', sass.logError ))
   .pipe(sourcemaps.write('/maps'))
   .pipe(gulp.dest('./'))
   .pipe(connect.reload());
});

//------------------------------------- END OF CODE -----------------------------------



// CSS via Sass and Autoprefixer
gulp.task('css', function() {
    return gulp.src(scss + '{style.scss,rtl.scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'expanded', 
        indentType: 'tab',
        indentWidth: '1'
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer('last 2 versions', '> 1%')
    ]))
    .pipe(sourcemaps.write(scss + 'maps'))
    .pipe(gulp.dest(root));
});

// Optimize images through gulp-image
gulp.task('images', function() {
    return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
    .pipe(newer(img))
    .pipe(image())
    .pipe(gulp.dest(img));
});

// JavaScript
gulp.task('javascript', function() {
    return gulp.src([js + '*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest(js));
});


// Watch everything
gulp.task('watch', function() {
    browserSync.init({ 
        open: 'external',
        proxy: 'localhost/wp',
        port: 8080
    });
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
    gulp.watch(js + '**/*.js', ['javascript']);
    gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
    gulp.watch(root + '**/*').on('change', browserSync.reload);
});


// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);

然后，我在NetBeans 8.1中配置了CSS Predecessor，需要先下载Ruby on Rails，然后在CLI中使用Ruby on Rails安装SASS。

Gulp browsersync停止自动编写代码

1 个答案: