简体   繁体   English

Gulp没有错误,但SASS没有编译成CSS

[英]Gulp No errors but sass is not compiling into css

please help I'm not getting any errors but this code will not create the compiled css from the scss file. 请帮助我没有任何错误,但是此代码不会从scss文件创建已编译的CSS。 I am writing the code within the underscore WP theme if that matters I don't think it should though. 如果我不认为这很重要,那么我将在下划线WP主题下编写代码。 I have all the dependences loaded on my machine. 我的机器上装有所有依赖项。 I will attach my JSON in the case someone would need to see that. 如果有人需要看到它,我将附加我的JSON。

    var themename = 'taylerco';

var gulp = require('gulp'),
    //prepare and optimize code
    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: 'localhost:8888',
        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 talk (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);

package.json 的package.json

{
  "name": "tayler.co",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^7.1.6",
    "browser-sync": "^2.18.13",
    "gulp": "^3.9.1",
    "gulp-image": "^4.1.0",
    "gulp-jshint": "^2.0.4",
    "gulp-newer": "^1.3.0",
    "gulp-postcss": "^7.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.1",
    "jshint": "^2.9.5"
  }
}

There seems to be a typo in your syntax. 您的语法似乎有错字。

Change 更改

 return gulp.src(scss + '{style.scss,rtl.scss')

To

 return gulp.src(scss + '{style.scss,rtl.scss}')

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM