GULP LESS进口没有工作在没有gulp-less npm

时间:2016-02-16 09:31:51

标签: npm gulp lumen gulp-less

在过去的两年里一直使用Gulp,我突然遇到文件导入较少的问题而无法解决它。

我尝试了超过5种组合,例如来自SmashingMagazine,来自gulp-less主页等等......没有一种方法适用于我。

问题是(控制台输出中的错误日志):

C:\wamp\www\lumenframe>gulp less
[10:23:25] Using gulpfile C:\wamp\www\lumenframe\Gulpfile.js
[10:23:25] Starting 'less'...
Potentially unhandled rejection [2] '/bower_components/animate.css/animate.css' wasn't found. Tried - /bower_components/animate.css/animate.c
ss,bower_components\bootstrap\less\bower_components\animate.css\animate.css,bower_components\animate.css\bower_components\animate.css\animate
.css,bower_components\font-awesome\less\bower_components\animate.css\animate.css in file C:\wamp\www\lumenframe\bower_components\assets\l
ess\appstrap.less line no. 43

Gulpfile.js看起来像这样:

// Init Gulp
var gulp = require('gulp');

// Dependencies
var less = require('gulp-less'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    autoprefixer = require('gulp-uglify');

// Folder paths
var jsdir = './bower_components/assets/js/',
    jspub = './public/assets/js/',
    lessdir = './bower_components/assets/less/',
    lesspub = './public/assets/css/';

// LESS compiler
gulp.task('less', function () {
    return gulp.src(lessdir + 'frontend.less')
        .pipe(less({
            compress: true,
            paths: [
                './bower_components/bootstrap/less/',
                './bower_components/animate.css/',
                './bower_components/font-awesome/less/'
            ]
        }))
        .pipe(autoprefixer('last 10 versions', 'ie 9'))
        .pipe(gulp.dest(lesspub));
});

// Concatenate and Minify JS
gulp.task('scripts', function () {
    return gulp.src(jsdir + '*.js')
        .pipe(concat('appstrap.js'))
        .pipe(gulp.dest(jspub))
        .pipe(rename('appstrap.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(jspub));
});

// Filewatcher for changes
gulp.task('watch', function () {
    gulp.watch(jsdir + '*.js', ['scripts']);
    gulp.watch(lessdir + '*.less', ['less']);
});

// Default Task combination
gulp.task('default', ['less', 'scripts', 'watch']);

所有文件都在适当的位置,因此它们存在。一旦我做@import appstrap.less,就会出现错误**潜在的未处理拒绝[2]。

frontend.less看起来像这样:

// Core source files of the whole frontend plugins
@import (once) "appstrap.less";

.btn{
    color: #ff0000;
    display: block;
}

有任何明显错误吗?

0 个答案:

没有答案