标签: gulp-sass

如何在Gulp管道中执行输出到不同目的地的条件.

g.task('sass', function() {
  return g.src(sources.sass).pipe(changed(output.css)).pipe(sass({
    style: 'compressed',
    sourcemap: true
  })).pipe(function() {
    if (..) {
      g.dest(output.css);
    } else {
      g.dest(output.css2);
    }
  }).pipe(notify('scss converted to css and
compressed
<%=f ile.relative %>'));
});

我在我的机器上安装了gulp,但是当我尝试编译我的项目时,我有这个错误:

Error: Cannot find module 'del'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Applications/MAMP/htdocs/project/gulpfile.js:6:11)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

我不明白错误,我不知道如何解决.有人可以帮帮我吗？谢谢

我收到此错误无法找到模块'../lib/completion'但是我已经安装完成并且lib.file存在于lib文件中.

->gulp compile
module.js:327
    throw err;
    ^

Error: Cannot find module '../lib/completion'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (D:\wamp23\www\mfe\ref\gulpfile.js:13:18)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

我正在尝试使用ng-factory生成器来构建一个新项目来构建一个angularjs组件.使用yo ng-factory命令创建项目后,我尝试使用gulp serve任务运行它,但发现以下错误:

c:\projects\bywebclient>gulp serve
[11:20:51] Loading C:\projects\bywebclient\gulp_tasks\browsersync.js
[11:20:52] Loading C:\projects\bywebclient\gulp_tasks\karma.js
[11:20:57] Loading C:\projects\bywebclient\gulp_tasks\misc.js
[11:20:57] Loading C:\projects\bywebclient\gulp_tasks\webpack.js
[11:21:07] Using gulpfile c:\projects\bywebclient\gulpfile.js
C:\Users\ATUL KALE\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129
gulpInst.start.apply(gulpInst, toRun);

^

TypeError:无法
在C:\ Users\ATUL KALE\AppData\Roaming \npm \node_modules\gulp\bin\gulp.js:129:19

处读取未定义的属性'apply',位于_combinedTickCallback(internal/process/next_tick.js:67 :7)
在
program.runMain(module.js:577:11)的process._tickCallback(internal/process/next_tick.js:98:9)中,
在运行
时启动(bootstrap_node.js :352:7)(bootstrap_node.js) :144:9)
在bootstrap_node.js:467:3

我错过了什么吗？我已经尝试再次运行npm install

谢谢,Atul Kale

我需要帮助将源映射添加到同一CSS输出文件夹中的SASS编译器.直到现在,我必须在其中安装gulp-sourcemaps模块,gulpfile.js但无法知道绑定sourcemaps.write为gulp.task的成功.

任何帮助深表感谢 :)

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var bs = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
    server: {
        baseDir: "./"
    },
    proxy: {
        target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port]
        ws: true // enables websockets
    }
});
});

gulp.task('sass', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css'))
        .pipe(bs.reload({
            stream: true
        }));
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("*.php").on('change', bs.reload);
});

我一直致力于新的Web开发项目,在实践中,这些项目node_modules在部署时并不需要他们的文件夹.如果我能够gulpfile.js为每个项目创建一个小项目,而不是每个项目的node_modules文件夹中包含的6000多个文件,这对我来说更适合我,这些只是我在这台机器上使用过的.

我只使用Gulp编译SASS并加前缀和缩小我的CSS.我不需要担心任何其他类型的部署问题,但文档说我需要两者:Gulp的全局和本地副本.

在gulp-sass中有没有可用的选项来组合sass文件？

例如:

main.scss:

$var: red;

control.scss:

@import 'main';
.a{
  color: $var;
}

组合输出文件应该是单个scss文件,如下所示

$var: red;
.a{
  color: $var;
}

我对Foundation 6文件有一些问题,由于某些原因它们不包括所有sass组件.我尝试使用Foundation 5,它工作正常.

这是我的gulp任务:

gulp.task('styles', ['clearCss'], function() {
    gulp.src('assets/sass/app.scss')
        .pipe(plumber(plumberErrorHandler))
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed'
        })
        .on('error', notify.onError(function(error) {
            return "Error: " + error.message;
        }))
        )
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9']
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./assets/dist/css')) 
        .pipe(browserSync.stream({match: '**/*.css'}))
        .pipe(notify({
            message: "Styles task complete!"
        }));
});

这是我的app.scss:

// Import Foundation
@import "../components/foundation/scss/foundation";

它适用于我自己的sass文件,但完全忽略了基础部分.

这周末我开始玩gulp.我想建立一个可以的任务

• 编译我的sass文件
  • 如果我在sass文件中出错,继续工作
  • 使用sass Bootstrap
• 生成源图
• 附加浏览器前缀
• 注入已编译的css没有浏览器重新加载
• 快速(开发环境中的1-2秒)

我得到了大部分步骤,但浏览器前缀给了我一个艰难的时间这是我到目前为止所得到的

var browserSync = require('browser-sync');
var reload = browserSync.reload;
var filter = require('gulp-filter');
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');

var config = {
    sassPath: './sass',
    bower: './bower_components',
    bootstrap: './bower_components/bootstrap-sass-official/assets/stylesheets',
    fonts: './bower_components/bootstrap-sass-official/assets/fonts'
};

gulp.task('sass', function () {
    return gulp.src(config.sassPath + '/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                //outputStyle: 'compressed',
                outputStyle: 'nested',
                precision: 10,
                includePaths: [
                    config.sassPath,
                    config.bower,
                    config.bootstrap …

使用gulp-sass我可以包含.scss文件 @import 'filepath.scss';

但是当我尝试导入普通的css文件时@import 'filepath.css',它只是将输入行添加import url(filepath.css);到输出css文件中,而不是实际导入代码.

如何导入CSS文件以及SCSS文件？我想这样做包括文件形式凉亭.

这是我的gulp功能:

// include gulp
var gulp = require('gulp');

// include deps
var minifyCSS  = require('gulp-minify-css'),
    autoprefix = require('gulp-autoprefixer'),
    rename     = require('gulp-rename'),
    sass       = require('gulp-sass');

var targets = {
    css: './output/css'
};

// compile CSS
gulp.task('sass', function() {

    gulp.src([
        './app/assets/scss/app.scss', 
        './app/assets/scss/app-admin.scss'
    ])
    .pipe(sass({
        includePaths: [
            './bower_components/bootstrap-sass-official/vendor/assets/stylesheets', 
            './bower_components'
        ],
        errLogToConsole: true
    }))

    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest(targets.css))
    .pipe(minifyCSS())
    .pipe(rename(function (path) { path.basename += '.min'; }))
    .pipe(gulp.dest(targets.css));
});

例如,我想包括datatables/media/css/jquery.dataTables.css相对于上面包含的凉亭目录的数据表.

所以在我的app.scss …