标签: gulp

我目前有两个任务,都编译sass文件.我仍然希望将两个目录连接成单独的文件,但是如果我可以简单地创建一个负责所有sass编译的"sass"任务,那么它似乎更易于维护.

// Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(contact('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(contact('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

更新:

我试过这个:

// Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = function() {
    return gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  var site = function() {
    return gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  return Promise.all([bootstrap, site]);
});

但现在看来这两个文件都没有被编译.对我做错了什么建议？

我有一个gulp文件中使用的当前gulp任务.路径来自config.json,一切都很完美:

//Some more code and vars...

gulp.task('watch', function() {
    gulp.watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], ['imagemin-cfg']);
})

//Some more code ...

gulp.task('imagemin-cfg', function () {
    return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
});

但我仍然有一个问题,我的项目中的图像数量很大,这项任务需要很长时间.我正在寻找一种方法来仅在修改过的文件上运行我的任务.如果我有一个图像或修改它,imagemin()将只在这个图像上运行,而不是在所有图像上运行.

一切都工作得很好,但运行时间真的很长.

谢谢.

我一直在尝试编写两个管道函数,一个编译较少的文件,另一个编译这些文件.我想学习如何为更复杂的插件编写转换流/管道.

所以我想知道如何从另一个管道读取数据,以及如何更改该数据并将其发送到下一个管道.这是我到目前为止:

 gulp.src(sources)
   .pipe(through.obj(function (chunk, enc, cb) {

     var t = this;
     // console.log("chunk", chunk.path);
     fs.readFile(chunk.path, enc, function (err,data) {
       if (err) { cb(err); }

       less.render(data, {
         filename : chunk.path,
         sourceMap : {
           sourceMapRootpath : true
         }
       })
       .then(function (outputCss) {
          // console.log("less result",outputCss);
          t.push(chunk);// or this.push(outputCss) same result
          cb();
       });

     });

   }))
   .pipe(through.obj(function (chunk, enc, cb) {
     console.log("chunk", chunk.path); // not event getting called.
     cb();
   }))

我无法获取outputCSS第二个管道中的每个文件.我该怎么发送？

我正在尝试使用gulp和browserify将我的.jsx文件转换为.js文件.

var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify');

gulp.task('js', function () {
  browserify('public/javascripts/src/app.jsx')
    .transform(reactify)
    .bundle()
    .pipe(gulp.dest('public/javascripts/dist'))
});

```

以上扔了Arguments to path.resolve must be strings.我设法通过使用来绕过它vinyl-source-stream

var source = require('vinyl-source-stream');
...
.bundle()
.source('app.js')
...

为什么这样做？我对nodejs和gulp相当新.在阅读了项目的README和源代码之后,我仍然感到困惑.有帮助吗？

我在使用这行代码时遇到错误

const sass = require('gulp-sass')(require('sass'));

错误输出是：

Requiring external module babel-register
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\xampp-clean\htdocs\myfirsttheme\package.json' contains "type": "module". T
o treat it as a CommonJS script, rename it to use the '.cjs' file extension.

我变了

const sass = require('gulp-sass')(require('sass'));

错误消失了，但我收到此错误：

Requiring external module babel-register
TypeError: Cannot read property 'prod' of undefined

这行导致了错误：

const …

我尝试安装gulp-sass最新版本，npm i gulp-sass --save-dev 一开始我遇到了很多错误，但后来解决了。但是每当我尝试运行 gulp 时，我都会收到此错误：

Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (C:\Users\user\Desktop\HPortf\node_modules\node-sass\lib\binding.js:13:13)
    at Object.<anonymous> (C:\Users\user\Desktop\HPortf\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1083:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
    at Module.load (node:internal/modules/cjs/loader:948:32)
    at Function.Module._load (node:internal/modules/cjs/loader:789:14)
    at Module.require (node:internal/modules/cjs/loader:972:19)
    at require (node:internal/modules/cjs/helpers:88:18)
    at Object.<anonymous> (C:\Users\user\Desktop\HPortf\node_modules\gulp-sass\index.js:166:21)
    at Module._compile (node:internal/modules/cjs/loader:1083:30)

我试图解决这个问题，npm rebuild node-sass --force但它也增加了错误。

Error: Node Sass does not yet support …

我想在gulp.watch函数末尾添加一些bash命令来加快我的开发速度.所以,我想知道是否有可能.谢谢!

我正在使用gulp以及gulp-minify-css,gulp-uglify等gulp插件(我的应用程序列为npm依赖项).

此外,我不提交npm_modules文件夹和公共文件夹,其中所有生成的文件都是.在部署和设置我的服务器之后,我无法弄清楚如何构建我的应用程序(我有gulp构建命令)(它已经在寻找公共文件夹).

在上传之前提交我似乎是一个坏主意.也许有一些温和的决定......有什么想法吗？

分享自:如何部署使用grunt到heroku的节点应用程序

我正和Gulp 使用sass -lint.如何从lint控制台输出中禁用我sass中特定样式的警告？

我发现了一个类似的问题,但我使用sass -lint,而不是scss -lint: 让scss-lint忽略一个特定的行

这是我正在使用的那个:https://www.npmjs.com/package/gulp-sass-lint

我尝试了一些基于scss -lint项目的变体:

// scss-lint:disable ImportantRule
// sass-lint:disable ImportantRule
// sass-lint:disable no-important

为了清楚起见,我想在我的SASS中禁用特定样式的警告,而不是全局.触发警告的事情是故意的,我会使用它.例如,我可能会设置多个背景样式,因此一个可以作为旧版浏览器的后备.但目前这是触发无重复属性警告.

我有gulp-ruby-sass的问题.当我尝试运行监视任务并更改一些.sass文件时,会发生错误:

TypeError: Arguments to path.join must be strings 

这是我的gulpfile.js

var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-ruby-sass');
var watch = require('gulp-watch');

gulp.task('sass', function() {
    return gulp.src('sass/*.sass')
        .pipe(sass())
                .pipe(gulp.dest('./css'));

});
gulp.task('watch', function() {
    gulp.watch('./sass/*.sass', ['sass']);
})

我使用gulp-slash但它不起作用.