解决方案1：

Question

我正在使用less and gulp来处理wordpress主题。由于我需要为bootstrap + fontaweseome调整一些默认路径和值，因此我的自定义变量（overwrite.less）文件较少。但它根本不影响变量。

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

文件被缓存以加速构建（＆lt; 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个任务。

解决方案2：

将任何内容保存在一个任务中，并将modifyVars注入较少的任务

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

使用Gulp编译较少 - 包含变量

1 个答案:

解决方案1：

解决方案2：