javascript - gulp怎么编译less文件中依赖的less文件
ringa_lee
ringa_lee 2017-04-10 16:33:33
[JavaScript讨论组]

a.less文件里面引入了b.less变量文件,当我编辑了b.less文件,a.less怎么自动编译?跪求大神指教!

ringa_lee
ringa_lee

ringa_lee

全部回复(3)
伊谢尔伦

那你就 watch b.less呀, 当b.less有变化,编译a.less就OK啦。

给个例子: @OnlyLing 修改一下你的例子

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

gulp.task('less', function() {
    return gulp.src('less/**/app.less')
        .pipe(less())
});

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

gulp.task("default", ['less', "watchFiles"]);

你可以参考我之前写得一个 https://github.com/hjzheng/CUF_meeting_knowledge_share/blob/master/2015-7-23/gulp-less-bootstrap/gulpfile.js

阿神

最后需编译的less文件例如:
app.less

@import 'variables.less';
@import 'normalize.less';
@import 'base.less';
@import 'form.less';
@import 'ui.less';

安装gulp插件:gulp-less

var gulp = require('gulp'),
    less = require('gulp-less');
gulp.task('less', function() {
    return gulp.src('less/**/app.less')
        .pipe(less())
});

生成的css文件中会包含所有import进来的文件代码。

高洛峰

@yuuk 很感谢你的答复,问题已经得到解答!

觉得你是缺少了这部分:
.pipe(less({paths:['src/less']}))

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号