使用Gulp包含变量进行更少的编译

Question

我正在做一个wordpress的主题，用更少的和吞咽。由于我需要调整引导程序+ fontaweseome的一些默认路径和值，所以我的自定义vars (overwrite.less)有一个较少的文件。但它根本不影响变量。

通过mainBowerFiles注入的文件较少，文档表示更少的vars支持延迟加载。(http://lesscss.org/features/#variables-feature-lazy-loading)

文件被缓存，以加快构建(< 10 ms)，但即使没有-没有效果。

gulpfile.js:

'use strict';
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
var util = require('gulp-util');
var sourceMaps = require('gulp-sourcemaps');
var del = require('del');
var cache = require('gulp-cached');
var remember = require('gulp-remember');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var mainBowerFiles = require('main-bower-files');


var paths = {
    target: '../vagrant/www/wordpress/wp-content/themes/themename',
    bowerJs: mainBowerFiles('**/*.js'),
    bowerLess: mainBowerFiles('**/*.less'),
    lessFiles: ['overwrite.less','less/**.less'],
    jsFiles: ['js/**.js']
};

var allLess = paths.bowerLess.concat(paths.lessFiles);
var allJs = paths.bowerJs.concat(paths.jsFiles);



function compileLess() {
    var s = gulp.src(allLess);
    s = s.pipe(sourceMaps.init());
    s = s.pipe(cache('less'));
    s = s.pipe(less());
    s = s.pipe(remember('less'));
    s = s.pipe(minifyCss());
    s = s.pipe(concat('style.css'));
    s = s.pipe(sourceMaps.write('maps/'));
    return s.pipe(gulp.dest(paths.target));
}

function compileJs() {
    var s = gulp.src(allJs);
    s = s.pipe(sourceMaps.init());
    s = s.pipe(cache('js'));
    s = s.pipe(uglify());
    s = s.pipe(remember('js'));
    s = s.pipe(concat('app.js'));
    s = s.pipe(sourceMaps.write('maps/'));
    return s.pipe(gulp.dest(paths.target));
}


gulp.task('move', function() {
    var filesToMove = ['./*.php', './assets/**', 'bower_components/**', './partial/**'];
    gulp.src(filesToMove, { base: './' })
        .pipe(gulp.dest('../vagrant/www/wordpress/wp-content/themes/codecampus')).once('end', function () {
            browserSync.reload();
    });
});

gulp.task('browser-sync', function() {
            browserSync.init([], {
            proxy: "http://vccw.dev/"
        });
});


gulp.task('watch', function () {
    gulp.watch('less/**/*.less', ['less']);
    gulp.watch('js/**/*.js', ['js']);
    gulp.watch(['./*.php', './assets/**',  './partial/**'], ['move'])

});


gulp.task('less', function () {
    util.log('Compile less ...');
    browserSync.reload();
    return compileLess();
});


gulp.task('js', function () {
    util.log('Compile js ...');
    browserSync.reload();
    return compileJs();
});


gulp.task('clean', function (cb) {
    util.log('Delete old less ...');
    del([paths.target + '**/*'], {force: true}, cb);
});


//define tasks
gulp.task('default', [ 'clean', 'less', 'js' , 'move', 'watch', 'browser-sync'], function () {
    return util.log('Gulp is running!');
});

Answer 1

解决方案1：

拆分保龄球少文件，加上覆盖和您的自定义样式。这样你就少了两个任务。

解决方案2：

将任何东西保存在一个任务中，并将modifyVars注入到较少的任务中

s = s.pipe(less({
    modifyVars: {
        "fa-font-path" : '"../custom/path/"',
         ...
        }
    }));