javascript - Grunt中watch和less配合控制*.less文件的自动编译,怎么配置文件名/路径?(通配符的使用问题)
PHP中文网
PHP中文网 2017-04-10 14:51:05
[JavaScript讨论组]

我想在 Gruntfile.js 中设置watch监听目录下的所有.less文件的更改(第一步),同时触发相应less文件编译为.css文件(第二步)。
我目前的设置是这样的:

module.exports = function(grunt){
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
        less: {
            files: ['public/**/*.less'],
            tasks:['less:task1'],
            options: {livereload:false}
        },
        css: {
            files: ['public/**/*.css'],
            options: {livereload:true}
        }
    },
    less: {
        task1:{
            options: {
                compress: false,
                yuicompress: false
            },
            files: {
              "public/css/style1.css": "public/css/style1.less",
              "public/css/style2.css": "public/css/style2.less"
              //...
            }
        }
    },
});

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');

grunt.registerTask('default',['watch']);
grunt.registerTask('lessc',['less:task1']);

};

以上配置目前只实现了第一步watch的监听,在less任务中,我现在只能列举出每一个存在的less文件。
但是我想用通配符来做。如果用通配符这样写的话:

          files: {
              "public/**/*.css": "public/**/*.less"
          }

结果是编译的时候真的生成了**文件名的文件夹和文件(如下)。现在我不知道这里应该怎么写呢?求教。

>> File "public/css/style1.less" changed.
Running "less:task1" (less) task
File tpl/**/*.css created
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
高洛峰

less :{ main: { expand: true, cwd: './less/', src: ['**/*.less'], dest: './css/', ext: '.css' } },

ringa_lee

直接用构建工具啊。。。grunt配置太麻烦了。
例如 我们团队开发的 silky, 还有我的个人版 slow-cli 或者用京东的 jdf 都可以。 没必要这么麻烦...
npm 上都有。
开发直接使用, 打包直接构建,肯定满足你一般的开发需求的。

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

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