2017-06-12 46 views
1

因此,我一直在这个项目上工作了一段时间,我想添加自己的CSS到项目中。我试图添加一个新的scss文件到项目中,并将其内置到主css文件中,但Gulp不想导入我的scss文件。Gulp不更新输出css与新的scss文件

下面是一口代码

var gulp = require('gulp'); 
var uglify = require('gulp-uglify'); 
var watch = require('gulp-watch'); 
var batch = require('gulp-batch'); 
var sass = require('gulp-sass'); 
var minifyCss = require('gulp-minify-css'); 
var concat = require('gulp-concat'); 
var rename = require('gulp-rename'); 
var webserver = require('gulp-webserver'); 

var paths = { 
    sass: ['src/scss/**'], 
    js: ['src/ng/_declare.js', 'src/ng/**'], //_declare.js needs to be first, so it gets added to bundle first. 
    static: ['src/js/**'], 
    core: ['./td_frontend_shared/**'] 
}; 

gulp.task('default', ['watch-dev']); 

gulp.task('publish-dev', function(done){ 

}); 

gulp.task('sass', function(done) { 
    gulp.src('src/scss/import.scss') 
    .pipe(sass()) 
    .on('error', function(err){ 
     console.log('error building sass', err); 
     done(); 
    }) 
    .pipe(gulp.dest('public/dist/')) 
    .pipe(minifyCss({ 
     keepSpecialComments: 0 
    })) 
    .pipe(rename({ extname: '.min.css' })) 
    .pipe(gulp.dest('public/dist/')) 
    .on('end', done); 
}); 

任何帮助将不胜感激!

回答

0

如果您希望在命令行中使用gulp,您需要在默认情况下添加该任务。你可以做这样的...

gulp.task('default', function() { 
    gulp.start(
     'sass' 
    ); 
}); 

试试我的仓库里面HTML项目中使用SASS,它支持巴贝尔(可选)和自动重新加载页面时,你改变scss文件;)

https://github.com/shramee/gulp-sass-babel

+0

很容易就可以运行'gulp sass',并且我想弄清楚为什么我的新scss文件没有被添加到正在构建的css文件中。 (我使用它作为它自己的函数在多个任务中调用它(对不起并没有包含整个gulp文件,但是希望保持这个简短) –

+1

你的目录结构是什么?你试图编辑哪个文件?您希望花费一些时间将CSS添加到? – shramee

+0

后,我发现有一个用于导入所有新的scss文件的scss文件,我不知道我的gulp文件从导入中导入了scss文件。 scss文件 –