gulp 批量添加类名在一个任务中使用多个文件来源

清疚 2021-12-16 12:23 220阅读 0赞

1.首先安装环境

1.安装gulp： npm install gulp

2.安装gulp-clean-css npm install gulp-clean-css

3.安装gulp-css-wrap npm install gulp-css-wrap

4.npm i gulp merge-stream //在一个任务中使用多个文件来源

然后再项目根目录新建gulpfile.js文件,写入以下代码

var path = require('path')
    var gulp = require('gulp')
    var cleanCSS = require('gulp-clean-css')
    var cssWrap = require('gulp-css-wrap')
    var merge = require('merge-stream');
    
    gulp.task('css-wrap', function () {
        var light = gulp.src(path.resolve('./src/assets/scss/theme/light/index.css'))
        /* 找需要添加命名空间的css文件，支持正则表达式 */
        .pipe(cssWrap({
            selector: '.theme-light' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('./src/assets/scss/theme/css/light')); /* 存放的目录 */
    
        var dark = gulp.src(path.resolve('./src/assets/scss/theme/dark/index.css'))
        /* 找需要添加命名空间的css文件，支持正则表达式 */
        .pipe(cssWrap({
            selector: '.theme-dark' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('./src/assets/scss/theme/css/dark')); /* 存放的目录 */
    
        return merge(light,dark);
    })

然后在命令行运行：gulp css-wrap  就生成了添加过类名的css文件啦

转载于:https://www.cnblogs.com/SPHmomo/p/11039084.html

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关文件没有后缀名，如何批量添加为.jpg

果当前文件夹内文件都没有后缀，且要批处理成.jpg **@echo off** **ren \* \*.jpg** ![format_png][] [fo...

柔情只为你懂/ 2024年04月18日 08:57/ 0 赞/ 63 阅读

相关使用gulp压缩一个js文件

首先下载gulp，gulp-uglify 命令行输入： npm install gulp -g npm install gulp-uglify -g 然后新建一个文

谁借莪１个温暖的怀抱￠/ 2022年08月29日 05:55/ 0 赞/ 230 阅读

相关 gulp自动化任务脚本在HybridApp开发中的使用

目前做前端开发的同学可能都熟悉grunt，fis之类的自动化构建工具，其实在HybridApp开发中我们也可以使用这些工具来简化我们的工作，gulp就是一个比gru

川长思鸟来/ 2022年08月24日 00:55/ 0 赞/ 204 阅读

相关前端工程化：在gulp中顺序执行任务

[gulp][] 是前端开发过程中对代码进行构建(Build)的工具，类似于Java世界中的Ant或者Maven。与Ant或Maven类似，在用gulp进行build时，经常需

本是古典何须时尚/ 2022年08月07日 14:48/ 0 赞/ 296 阅读

相关 Spark如何在一个SparkContext中提交多个任务

在使用spark处理数据的时候，大多数都是提交一个job执行，然后job内部会根据具体的任务，生成task任务，运行在多个进程中，比如读取的HDFS文件的数据，spark会加载

刺骨的言语ヽ痛彻心扉/ 2022年06月13日 10:14/ 0 赞/ 195 阅读

相关如何批量修改多个文件的后缀名！

方法一，利用DOS命令： 1.点击“开始”，在“运行”里输入cmd 2.利用盘符转移命令转到你想要操作的盘,命令格式为盘符名+冒号+回车 3.利用DOS命令进入文件夹

￡神魔★判官ぃ/ 2022年05月12日 12:38/ 0 赞/ 310 阅读

相关原生js怎么添加一个或多个类名？（赞）

原文出处：[https://www.jianshu.com/p/e09271abebc7][https_www.jianshu.com_p_e09271abebc7] 好吧

末蓝、/ 2022年05月11日 00:06/ 0 赞/ 186 阅读

相关 Spark如何在一个SparkContext中提交多个任务

在使用spark处理数据的时候，大多数都是提交一个job执行，然后job内部会根据具体的任务，生成task任务，运行在多个进程中，比如读取的HDFS文件的数据，spark会加载

末蓝、/ 2022年04月06日 09:14/ 0 赞/ 272 阅读

相关 3. 批量添加多个用户

批量创建多个用户的需求在生产环境下用的不多，但是经常会在面试时的笔试题上看到，本案例就是批量创建多个用户。具体要求如下： 1）批量创建100个用户；

向右看齐/ 2022年03月28日 07:42/ 0 赞/ 286 阅读

相关 gulp 批量添加类名在一个任务中使用多个文件来源

1.首先安装环境 1.安装gulp： npm install gulp 2.安装gulp-clean-css npm install gulp-clean-css 3.安

清疚/ 2021年12月16日 12:23/ 0 赞/ 221 阅读