标签: gulp-less

尝试创建一个gulp任务,通过LESS管理来自不同文件夹的一堆文件,然后将它们输出到基于原始源的文件夹.考虑这个文件夹结构:

Project
+-- /Module_A
|   +- /less
|   |  +- a.less
|   +- a.css
|
+-- /Module_B
    +- /less
    |  +- b.less
    +- b.css

这是我的gulpfile:

var gulp = require('gulp');
var gutil = require('gulp-util');
var less = require('gulp-less');

gulp.task('compileLess', function () {
  gulp.src('./*/less/*.less')
    .pipe(less())
    .pipe(gulp.dest( ??? ));
});

gulp.task('default', ['compileLess']);

我知道gulp.dest()期望传入路径,但在我的示例中,路径将根据源文件而不同.那么如何从源代码中获取路径,修改它然后将其传递给gulp.dest()？

或者我是以错误的方式来做这件事的？

我真的很喜欢gulpjs这是我的首选任务经理,但我希望我能在几个月前了解任务经理并进入gruntjs,主要是为了获得支持.对于gulpjs来说,很难找到有关具体事物的信息.

我的问题是我如何设置我,gulpfile.js以便我可以编辑bootstrap.less文件variables.less.我确实安装了" gulp-less ",并在下面实现了它.

var less = require('gulp-less'),
    path = require('path');

gulp.task('less', function () {
  gulp.src('./source/less/variables.less')
    .pipe(less())
    .pipe(gulp.dest('./source/css/bootstrap.css'));
});

运行后我收到以下错误gulp less.

events.js:72 throw er; // Unhandled 'error' event ^
Error: EEXIST, mkdir 'C:\wamp\www\myproj\source\css\bootstrap.css'

我不认为我的sass任务代码设置正确,我是一个gulp noobie但我尝试了多种组合,是的我确实使用了" gulp-less "文档中的示例,我使用的代码是最简洁明了的切断我想要完成的代码.

编辑:我在谷歌上发现了一些好的关键词我发现了一些关于这个的最近帖子,这里是一个开始Gulp与Gulp-less维护文件夹结构似乎没有一个好的答案生病必须阅读.

附加:我忘记了使用文档中的代码时,我收到了alert.less的错误

gulp.task('less', function () {
  gulp.src('./source/less/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./source/css'));
});

错误

stream.js:94
throw er; // Unhandled stream error in pipe.
^
[gulp] Error in plugin 'gulp-less': …

我正在努力解决以下问题:

我的gulpfile.js编译所有.less,缩小它并将所有CSS连接到./dist/all.min.css

有没有办法可以重写HTML文件,删除所有样式标签,只加一个样式标签加载缩小的CSS？

我正在使用更少和Grunt,并且正在努力.

我的作品少了.当我跑:

lessc public/less/myapp.less

我得到工作输出没有错误.我所有的少,包括包括,在公共/更少,BTW.这是我的gulpfile:

var gulp = require('gulp');
var prefixer = require('gulp-autoprefixer');
var less = require('gulp-less');

gulp.task('compileLess', function () {
  gulp
    .src('./public/less/*')
    .pipe(less({
      paths: ['./public/less'], // Search paths for imports
      filename: 'myapp.less'
    }))
    .pipe(gulp.dest('./public/css'));
});

// The default task (called when you run `gulp`)
gulp.task('default', function() {
  gulp.run('compileLess');

  // Watch files and run tasks if they change
  gulp.watch('./public/less/*.less', function(event) {
    gulp.run('less');
  });
});

当我跑了一口气,我得到:

~/Documents/myapp: gulp
[gulp] Using file /Users/me/Documents/myapp/gulpfile.js
[gulp] Working directory changed to /Users/me/Documents/myapp
[gulp] …

我正试图让我的头脑一直看着并编译一个无项目+ livereload.我有一个使用的style.less文件@import.当我运行gulp任务时,它似乎不理解导入.当我修改main less文件时,gulp编译文件并刷新浏览器,但如果我只修改导入,则忽略更改.

这是我的gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');

gulp.task('default', function() {
    return gulp.src('./style.less')
        .pipe(watch())
        .pipe(plumber())
        .pipe(less({
          paths: ['./', './overrides/']
        }))
        .pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
        .pipe(gulp.dest('./'))
        .pipe(livereload());
});

我尝试不指定主文件名,gulp.src('./*.less')但是所有较少的文件都是单独编译的.

谢谢

在我的办公室,我们使用gulp来构建我们较少的文件.我想改进构建任务,因为它花了一秒钟来构建我们最近工作的大型项目.想法是缓存文件,只传递更改的文件.所以我从谷歌开始,发现javascript的增量版本,并认为很容易以较少的方式重写它们.这是我开始使用的那个:https://github.com/gulpjs/gulp/blob/master/docs/recipes/incremental-builds-with-concatenate.md

经过几次不成功的尝试后,我最终得到了以下代码(使用最新的bootstrap发行版测试):

var gulp            = require('gulp');
var less            = require('gulp-less');
var concat          = require('gulp-concat');
var remember        = require('gulp-remember');
var cached          = require('gulp-cached');

var fileGlob = [
    './bootstrap/**/*.less',
    '!./bootstrap/bootstrap.less',
    '!./bootstrap/mixins.less'
];

gulp.task('less', function () {
    return gulp.src(fileGlob)
        .pipe(cached('lessFiles'))
        .pipe(remember('lessFiles'))
        .pipe(less())
        .pipe(gulp.dest('output'));
});

gulp.task('watch', function () {
    var watcher = gulp.watch(fileGlob, ['less']);
    watcher.on('change', function (e) {
        if (e.type === 'deleted') {
            delete cached.caches.scripts[e.path];
            remember.forget('lessFiles', e.path);
        }
    });
});

但是这只传递了更改的文件,并且由于缺少变量定义,编译器失败了.如果我在较少的任务之前管道concat插件,gulp卡在一个(看似)无限循环中.

gulp.task('less', function () {
    return gulp.src(fileGlob)
        .pipe(cached('lessFiles'))
        .pipe(remember('lessFiles'))
        .pipe(concat('main.less')
        .pipe(less()) …

我在我的一个项目上尝试了Gulp,我想像Grunt手表一样运行它.这意味着,一旦完成所有操作,它必须观察较少的文件和js文件,lint,合并,编译和刷新浏览器.

我设法使用gulp-browser-sync工作但由于某种原因它只能工作一次.我对我的.less文件进行了更改,浏览器重新加载.然后,第二次更改,它确实编译但没有重新加载发生.

这是日志:

[BS] Serving files from: ./
[09:47:26] Starting 'css-clean'...
[09:47:26] Finished 'css-clean' after 16 ms
[09:47:26] Starting 'styles'...
[BS] 1 file changed (styles.min.css)
[09:47:27] Finished 'styles' after 624 ms
[09:47:27] Starting 'styles-watch'...
[BS] Reloading Browsers...

当我第二次点击保存时:

[09:47:31] Starting 'css-clean'...
[09:47:31] Finished 'css-clean' after 3.39 ms
[09:47:31] Starting 'styles'...
[BS] 1 file changed (styles.min.css)
[09:47:32] Finished 'styles' after 362 ms

至于JS,它一直都在工作.没有任何问题,即使在完成样式任务之后,JS更改仍然会正确地触发重新加载.真的只是有问题的风格.

这是gulpfile.js

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    less = require('gulp-less'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    jshint …

我刚刚开始玩gulp,它非常快速且易于使用,但它似乎有一个严重的缺陷:当一个任务需要输出多种类型的文件时你会怎么做？

例如,gulp-less表示它甚至不支持该sourceMapFilename选项.我不希望我的源代码嵌入我的CSS文件中.我吵了吗？我应该回到使用Grunt,还是有办法解决这个问题？

我遇到了问题gulp.我和... gulp-watch一起跑.一切都运行得很好.gulp-lessgulp-clean

当我编辑somefile.less并用分号丢失保存它或者我不小心留下尾随时;s,保存时我的代码中gulp-less有错误,在控制台中记录错误.我修复后gulp-watch继续观看文件,但gulp-less不会触发,也不会编译.当我gulp在终端再次停止并再次运行时,一切都恢复正常.

这是我的gulpfile.js:

var gulp = require('gulp');
var clean = require('gulp-clean');
var gutil = require('gulp-util');
var less = require('gulp-less');
var watch = require('gulp-watch');
var path = require('path');

gulp.task('clean', function() {
    return gulp.src('src/main/webapp/styles/build', {read: false})
   .pipe(clean().on('error', gutil.log))
});

gulp.task('less', function() {
    return gulp.src(['src/main/webapp/styles/main.less'], {base: 'src/main/webapp/styles/'})
    .pipe(less().on('error', gutil.log))
    .pipe(gulp.dest('src/main/webapp/styles/build'))
    .on('error', gutil.log);
});

gulp.task('watch', function() {
    watch('src/main/webapp/styles/**/*.{less, css}', function() {
        gulp.start('less')
        .on('error', gutil.log); …

根据这个问题,可以从较少的v.1.4.0导入css文件.
我试图使用gulp-less任务,但它不起作用.
有没有办法像这样导入css文件:@import "../spritesheet.css";nodeJS gulp？