gulp插件gulp-ruby-sass在编译sass文件时不起作用。
'use strict'; var path = require('path'); var gulp = require('gulp'); var conf = require('./conf'); var browserSync = require('browser-sync'); var $ = require('gulp-load-plugins')(); var wiredep = require('wiredep').stream; var _ = require('lodash'); gulp.task('styles-reload', ['styles'], function() { return buildStyles() .pipe(browserSync.stream()); }); gulp.task('styles', function() { return buildStyles(); }); var buildStyles = function() { var sassOptions = { style: 'expanded' }; var injectFiles = gulp.src([ path.join(conf.paths.src, '/app/**/*.scss'), path.join('!' + conf.paths.src, '/app/index.scss') ], { read: false }); var injectOptions = { transform: function(filePath) { filePath = filePath.replace(conf.paths.src + '/app/', ''); return '@import "' + filePath + '";'; }, starttag: '// injector', endtag: '// endinjector', addRootSlash: false }; var cssFilter = $.filter('**/*.css', { restore: true }); return gulp.src([ path.join(conf.paths.src, '/app/index.scss') ]) .pipe($.inject(injectFiles, injectOptions)) .pipe(wiredep(_.extend({}, conf.wiredep))) .pipe($.rubySass(sassOptions)).on('error', conf.errorHandler('RubySass')) .pipe(cssFilter) .pipe($.sourcemaps.init({ loadMaps: true })) .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer')) .pipe($.sourcemaps.write()) .pipe(cssFilter.restore) .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/'))); };
TypeError: glob pattern string required at new Minimatch (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp-ruby-sass/node_modules/glob/node_modules/minimatch/minimatch.js:108:11) at setopts (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp-ruby-sass/node_modules/glob/common.js:112:20) at new GlobSync (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp-ruby-sass/node_modules/glob/sync.js:38:3) at Function.globSync [as sync] (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp-ruby-sass/node_modules/glob/sync.js:24:10) at /home/john/sac_srvs/new_srvs/sachin/node_modules/gulp-ruby-sass/index.js:68:21 at Array.forEach (native) at Object.gulpRubySass (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp-ruby-sass/index.js:67:10) at buildStyles (/home/john/sac_srvs/new_srvs/sachin/gulp/styles.js:50:13) at Gulp.sassOptions.style (/home/john/sac_srvs/new_srvs/sachin/gulp/styles.js:20:10) at module.exports (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7) at Gulp.Orchestrator._runTask (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp/node_modules/orchestrator/index.js:214:10) at Gulp.Orchestrator.start (/home/john/sac_srvs/new_srvs/sachin/node_modules/gulp/node_modules/orchestrator/index.js:134:8) at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20 at process._tickCallback (node.js:415:13) at Function.Module.runMain (module.js:499:11)
这是个棘手的问题。看起来您使用的是Generator-Gulp-Angular
和选定的Ruby-Sass
。不幸的是,gulp-ruby-sass
的API在9月份发生了变化(其2.0.0版本),生成器也没有更新。简而言之:新的API需要将源文件传递到流工厂方法.pipe($.rubysass([**source files here**],sassOptions)).on('error',conf.errorhandler('rubysass'))
中,这在将构建链与其他插件(如inject
或wiredep
组合时基本上是不可能的。我的建议是改用node-sass
--当然,如果您不绝对需要ruby-Sass
的话。
无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上。及其不利于团队协作。建议使用 less 作为 css 预处理器。 如果因为 less 不支持自定义函数选择用 sass 可以使用 less-plugin-functions 让 less 支持自定义函数。 gulp-sass 本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢,
输出:style.min.css 我尝试过的事情 1)尝试:将rubySass的sourcemap设置为false结果:无差异
我有一个将SASS编译成CSS的Gulp任务。这里有一个例子 上面的操作适用于其他的一切--将映射写入磁盘、添加前缀等。我使用的是最新的nodejs、gulpjs和相关的npm软件包。 my Stylesheets文件夹中的文件夹/资产结构示例: 例如,print.scss映射将正确具有。但是sectiona/style.scss映射将具有而不是我所期望的。 我已经确认将/scss/section
我当前正在设置我的gulpfile,而当watch任务正在运行scss任务时,我遇到了gulp-sass的问题。 这就是我的gulpfile.js的样子: 我在控制台中得到的错误: 基本错误是:未找到或无法读取要导入的1:9文件:./src/scss/modules/modules_base.scss 应用程序的结构:
这个周末我开始玩Gulp。我想建立一个任务 编译我的sass文件 如果我在sass文件中出错,请继续工作 使用sass引导程序 因此出于某种原因,它会尝试在sass目录中查找css文件 [编辑] 我找到了问题,但还无法解决。这个东西工作的管道:gulp-autoprefixer->做一些事情->前缀任务->vinyl-sourcemaps-apply 在gulp-autoprefixer\inde