首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在gulp任务中为图像排除文件夹?

在gulp任务中,可以使用gulp.src()方法来选择要处理的文件或文件夹。如果想要排除某些文件夹中的图像文件,可以使用gulp.src()方法的参数配置来实现。

首先,需要安装gulp和gulp-imagemin插件,可以使用以下命令进行安装:

代码语言:txt
复制
npm install gulp gulp-imagemin --save-dev

然后,在gulpfile.js文件中引入所需的模块:

代码语言:txt
复制
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

接下来,可以创建一个名为"images"的gulp任务,并在其中使用gulp.src()方法来选择要处理的图像文件。如果想要排除某些文件夹中的图像文件,可以使用"!"符号来排除指定的文件夹。例如,如果要排除名为"exclude"的文件夹中的图像文件,可以使用以下代码:

代码语言:txt
复制
gulp.task('images', function() {
  return gulp.src(['src/images/**/*', '!src/images/exclude/**/*'])
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

上述代码中,"src/images//"表示选择"src/images"文件夹下的所有子文件夹和文件,"!src/images/exclude//"表示排除"src/images/exclude"文件夹下的所有子文件夹和文件。

最后,使用gulp命令来运行该任务:

代码语言:txt
复制
gulp images

该任务将会处理除了"exclude"文件夹中的所有图像文件,并将优化后的图像文件输出到"dist/images"文件夹中。

推荐的腾讯云相关产品:腾讯云对象存储(COS) 腾讯云产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ASP.NET Core 的捆绑和缩小静态资产

ASP.NET Core 的捆绑和缩小静态资产 2020/09/02 作者:Scott Addie 和 David Pine 本文介绍应用捆绑和缩小的好处,包括如何在 ASP.NET Core Web...捆绑 捆绑将多个文件合并到单个文件。 捆绑可减少呈现 Web 资产(网页)所需的服务器请求数。 可以专门 CSS、JavaScript 等创建任意数量的单个捆绑。...缩小 缩小在不更改功能的情况下从代码删除不必要的字符。 因此,请求的资产( CSS、图像和 JavaScript 文件)的大小大幅减小。...第三方工具( Grunt 任务运行程序)以更复杂的方式完成相同的任务。 开发工作流需要捆绑和缩小之外的其他处理( linting 和图像优化)时,第三方工具非常适用。..., gulp.series("min")); 运行 Gulp 任务 若要在 Visual Studio 中生成项目之前触发 Gulp 缩小任务: 安装 BuildBundlerMinifier NuGet

4K20

给初学者的Gulp教程(译)

自从app被用来开发目的后,我们所有的代码都要放到app文件夹。 我们将不得不保持目录结构当我们运行我们的Glup配置。现在,让我们开始在gulpfile.js,创建我们第一个Gulp任务。...所以让我们在app/scss文件夹创建一个styles.scss文件。这个文件将会被加入到sass任务gulp.src。...表明,Gulp应该排除这个匹配的特征,当你要在匹配的文件排除一个文件,是非常有用的。倘若这样,not-me.scss将被排除出匹配。 4.*.....pipe(gulp.dest('app/css')) }) 其他在app/scss文件夹下找到的Sass文件,将自动被包括到sass任务。...我们也构建了第二个任务,build,创建一个dist文件夹给生产用网页。我们编译SassCSS,压缩我们所有的资源文件以及复制必要的文件夹到dist文件夹

4.3K20

gulp入门(小白级别)

使用流程 2.1 新建一个项目文件夹 新建一个项目,比如本次案例,我们的项目文件夹取名为:demo0927。...case2 执行多个任务 gulp执行多个任务,可以通过任务依赖来实现。...即是排除模式,它会在匹配的结果中排除这个匹配,要注意一点的是不能在数组的第一个元素中使用排除模式: gulp.src(['*.js', '!...b*.js']) //匹配所有js文件,但排除掉以b开头的js文件 gulp.src(['!...b*.js', '*.js']) //不会排除任何文件,因为排除模式不能出现在数组的第一个元素 展开模式 展开模式以花括号作为定界符,根据它里面的内容,会展开多个模式,最后匹配的结果所有展开的模式相加起来得到的结果

1.3K20

使用Gulp进行JavaScript自动化简易说明书

gulp.src('scss/*.scss') //该任务针对的文件,此处scss文件夹下,所有.scss后缀的文件 .pipe(scss()) //...此时您可以运行第一个任务。运行以下命令并观察,/ scss文件夹的所有SCSS文件都将编译到相应目录的CSSgulp scss 请注意,在本示例,我们指定了要运行的任务。...gulp.task('scss', function() { 我们定义名为“scss”的任务。 return gulp.src('scss/*.scss') 设置任务的源文件。这些被定义全局。...在这个例子,我们指的是以“.scss”结尾的“scss /”文件夹的所有文件。...第一个表示包括在子文件夹在内所有文件夹以“.scss”结尾的文件,第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。

3.2K10

前端构建工具gulpjs的使用介绍及技巧

把目录切换到你的项目文件夹,然后在命令行执行: npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖,则可以加上--save-dev: npm...Grunt主要是以文件媒介来运行它的工作流的,比如在Grunt执行完一项任务后,会把结果写入到一个临时文件,然后可以在这个临时文件内容的基础上执行其它任务,执行完成后又把结果写入到临时文件,然后又以这个基础继续执行其它任务...即是排除模式,它会在匹配的结果中排除这个匹配,要注意一点的是不能在数组的第一个元素中使用排除模式 gulp.src([*.js,'!...b*.js',*.js]) //不会排除任何文件,因为排除模式不能出现在数组的第一个元素 此外,还可以使用展开模式。...gulp执行多个任务,可以通过任务依赖来实现。

1.8K30

webpack使用优化(react篇)

这篇文章我们就来聊聊如何在Webpack构建的过程如何针对React的应用做一些优化。...在src目录下一级的文件,除了page文件夹是react的主体逻辑文件之外,其它的像img, js, css, libs,都属于各个页面都会用到的公共文件,utils, 上报等。...page目录下,common文件夹主要旋转跟React相关的一些公共的文件,公共的component,中间件等。而其它的文件夹就是每个页面的主体逻辑和资源,另外就是页面对应的html文件。...针对React的优化点 需要维护两套构建配置 Webpack跟Gulp和Grunt不同,前者属于配置型构建(当然也可以通过插件去做一些流程),后两者属于任务型的构建。...以前在用Gulp开发的时候,也会写一些任务专门针对开发或者生产的环境,分别再建两条任务流,分别去处理开发与生产环境的构建。

1.5K60

使用Gulp

Gulp是什么 Gulp是一个可以自动化完成我们开发过程中大量的重复工作的工具,使用Gulp可以自动化的完成,预处理语言的编译、js文件的压缩、css文件的压缩、html文件的压缩、图片体积优化等工作...Gulp的情况下进行的,没有安装Gulp可以看前面的Gulp的安装与使用的内容 1.创建一个src文件夹,并且在src文件夹下创建一个index.html文件 在Git Bash执行下面的命令创建一个...目录 .pipe(gulp.dest('dist/')); }); 4.在命令行执行文件拷贝任务,将src目录下的index.html文件拷贝到dist目录下 gulp copy 文件拷贝命令执行完成后可以看到在...code目录下自动创建了一个dist文件夹,并且在dist文件夹下自动创建了一个index.html文件,表示文件拷贝任务运行成功 5.自动执行文件拷贝任务 在这个文件拷贝任务,有一个非常大的弊端.../less/*.less', ['less']); }); 5.在命令行执行下面的命令,启动将Less文件编译成CSS文件的任务 gulp watchLess 5.修改less文件夹下的style.less

55930

Hexo博客静态资源加速

TinyPNG Imagine 特点 无损压缩 有损压缩,以牺牲图像质量,降低图像色彩来达到缩减图像大小的目的。 优点 能够完全保留图像色彩,不损伤图像质量 1....安装Gulp插件:在博客根目录[Blogroot]打开终端,输入: 安装各个下属插件以实现对各类静态资源的压缩。在此高呼卓越科技NB! Gulp创建gulpfile.js任务脚本。...指令流程如下: 可能出现的bug,毕竟是bug御三家,没点bug都不好意思出来混 部分js经过gulp-babel的压缩加密后,可能无法正常使用,报错一般提示该js的某个变量未被声明。...则在[Blogroot]\gulpfile.js修改js压缩任务的相关配置 ---- 以下内容针对第三方魔改方案进行优化适配。原生主题用户无需在意。..._custom文件夹下的所有CSS文件。

2.6K40

模块加载及第三方包

在命令行工具执行gulp任务 8 Gulp中提供的方法 gulp.src():获取任务要处理的文件 gulp.dest():输出文件 gulp.task():建立gulp任务...构建任务 // 构建任务 gulp.task('default', ['htmlmin','cssmin', 'jsmin', 'copy']); 6.出现以下错误: ?...如果模块后缀省略,先找同名JS文件再找同名JS文件夹 如果找到了同名文件夹,找文件夹的index.js 如果文件夹没有index.js就会去当前文件夹的package.json文件查找...会假设它是系统模块 Node.js会去node_modules文件夹 首先看是否有该名字的JS文件 再看是否有该名字的文件夹 如果是文件夹看里面是否有index.js 如果没有...index.js查看该文件夹的package.json的main选 项确定模块入口文件 否则找不到报错

1.8K30

第210天:node、nvm、npm和gulp的安装和使用详解

gulp是前端开发过程对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程很多重复的任务能够使用正确的工具自动完成;使用它,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率...gulp是引入开发过程的一些小工具,生产模式不需要gulp 本示例以gulp-less例(将less编译成css的gulp插件)展示gulp的常规用法,只要我们学会使用一个gulp插件后,其他插件就差看看其帮助文档了...2、首先确保你已经正确安装了NODE环境,然后以全局方式安装gulp npm install -g gulp 全局安装完gulp后,还需要在每个要使用gulp的项目中单独安装一次,把目录切换到你的项目文件夹...文件 gulp-minify-html 最小化图像gulp-imagemin 5、运行gulp 说明:命令提示符执行gulp 任务名称; 编译less:命令提示符执行gulp testLess; 当执行...gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

2.4K10
领券