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

我如何才能只在新的和更改的文件上运行gulp imagemin任务?

要只在新的和更改的文件上运行gulp imagemin任务,可以使用gulp-changed插件来实现。

首先,确保已经安装了gulp和gulp-changed插件。可以通过以下命令来安装:

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

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

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

接下来,定义一个任务来处理图片压缩:

代码语言:txt
复制
gulp.task('imagemin', function() {
  return gulp.src('src/images/**/*') // 指定要处理的图片文件夹路径
    .pipe(changed('dist/images')) // 只处理新的和更改的文件
    .pipe(imagemin()) // 执行图片压缩
    .pipe(gulp.dest('dist/images')); // 输出压缩后的图片到指定文件夹
});

在上述代码中,src('src/images/**/*')指定了要处理的图片文件夹路径,可以根据实际情况进行修改。changed('dist/images')用于只处理新的和更改的文件,imagemin()执行图片压缩,dest('dist/images')将压缩后的图片输出到指定文件夹。

最后,在命令行中运行以下命令来执行该任务:

代码语言:txt
复制
gulp imagemin

这样,gulp imagemin任务就会只在新的和更改的文件上运行,实现了只处理需要处理的文件的功能。

推荐的腾讯云相关产品:腾讯云对象存储(COS),用于存储和管理图片等文件。产品介绍链接地址:腾讯云对象存储(COS)

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

相关·内容

给初学者Gulp教程(译)

如果你足够疯狂,你甚至可以使用Gulp创造一个静态页面生成器(已经做到了!)。所以,Gulp是非常强大,但是如果你想创建你自己构建流程,你就要去学习如何使用Gulp。...brunch式一个相似的工具,聚焦于资源文件以及它捆绑在一些常用任务,像服务器和文件监视器。 最主要区别是你如何使用他们配置工作流。Gulp配置倾向于更短更简单,相对于Grunt。...编译像Sass或者LESS一样预处理器 优化资源文件,像CSS,JavaScript图片等 你也将学习如何使用容易理解执行命令行,将不同任务捆绑在一起。...监视Sass文件更改 Gulp提供我们一个watch方法,监视是否有文件更改。...第二个参数中所有任务运行完成后,task-three才能运行

4.3K20

gulp使用

引言 gulp是用于前端自动化构建,方便前端进行即时开发工具 自动化构建所需插件 项目路径下使用 npm init初始化之后,将下面需要安装依赖复制到package.json文件中 "devDependencies...复制到package.json文件中后,使用npm install命令,npm会下载devDependencies中对应版本号依赖文件,这里只是完成了本地安装,此时如果运行 gulp命令可能会报一些错误..., 大概率是因为没有安装对应全局插件,或者本地安装插件全局安装版本号不一致 如果没有安装对应全局本地插件,则使用命令安装(以版本号2.24.4browser-sync为例) npm install...)) .pipe(bs.stream()); }); //监听处理js文件任务 gulp.task('js',function(){ gulp.src(paths.js+"*.js") .pipe...':"./" } }); }); //创建一个默认任务 gulp.task('default',['bs','watch']); 使用gulp命令开启default默认任务之后,此时更改src

1.3K20

前端自动化工具 -- Gulp 使用简介

gulp呢,是基于stream流形式,也就是前一个函数(工厂)制造出结果,提供后者使用。 同样,也是包括基本用法各插件使用。...package.json包依赖文件一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本使用方式是这样:...(gulp-livereload) 图片缓存,只有图片替换了才压缩(gulp-cache) 更改提醒(gulp-notify) 清除文件(del) 使用它们,就要先install,可以直接在package.json...比如安装压缩css依赖包: npm install gulp-minify-css --save-dev 这里直接把所以依赖全支持,因为都要用到。...这个任务可以为空,代表着任务一依赖它(们),任务一执行完才轮到它,当然了,其实现在这个顺序好像有点..)

1.2K21

Gulp实现css、js、图片压缩以及css、js文件MD5命名

本人之前也是项目中没具体使用过,闲来无事,查查资料,自己写了一个用gulp工具小demo,有很多不足之处,欢迎指点。...() { //- compress-csscompress-js任务执行完毕再执行rev-index任务 /*修改index.html文件link标签script标签引用...运行完该命令后会生成以下三个目录:dist、rev-css、rev-js。其中dist目录下就是html文件、css文件、js文件图片,目录之前webContent目录下结构是一样。...运行完命令后项目整体结构如下: ? WebContent目录结构dist目录结构是一样,如下: ? ?...第六步:代码改动 如果后续代码有改动的话,执行一次gulp clean命令,再执行一次gulp rev 命令: gulp clean命令就可以把dist目录下生成所有文件全部删除,gulp rev命令会根据代码重新生成所有文件

12.1K80

Hexo博客推荐安装插件

链接产生, hexo generate 会产生一个文本文件,里面包含最新链接 链接提交, hexo deploy 会从上述文件中读取链接,提交至百度搜索引擎 每天定时提交 关于这部分,在网上没有找到合适插件...); //图片压缩组件 var changed = require("gulp-changed"); //文件更改校验组件 var gulpif = require("gulp-if"); //任务 帮助调用组件...(true|处理所有文件)(false|处理有更改文件) var isDebug = true; //是否调试显示 编译通过文件 var gulpBabel = require("gulp-babel...最大一个改变就是gulp.task函数现在支持两个参数,分别是任务运行任务函数 以后执行方式有两种: 直接在Hexo根目录执行 gulp或者 gulp default ,这个命令相当于...值得注意是:这个加入了图片压缩,如果不想用图片压缩可以把第154行 "compressImage", 第165行 ,"compressImage" 去掉即可 第二种方法通过插件完成,也是目前使用方法

1.2K20

从零开始构建你 Gulp

文件就会变特别的巨大,这很不利于我们之后维护及修改,所以我们要做第一件事就是将 gulpfile.js 文件进行分割,分成一个个小任务文件,每一个文件完成特定任务,这也是我们常说模块化处理...,每一任务文件不与其他文件产生直接交互,并通过赋值方式文件内部调用全局变量,下图是我们整个项目的目录结构,文章接下来部分,将会给大家详细讲解 图片 文件结构 我们先来简单介绍下我们文件目录结构..., ['optimize-images']); gulp.watch(config.sprites, ['sprites']); }) 图片 可以看到,watch 任务监听了四个文件路径下文件更改...,涉及到了 9 个任务运行,并没有涵盖我们定义所有任务,这是因为这 9 个任务已经满足了我们日常开发需求,至于其他任务,可以通过运行指定任务名来完成相应操作,当然,各位童鞋也可以根据自身需求来对...watch 文件进行更改,在这里只是提供一个示例方法 CSS 依赖包 接下来将根据作用文件类型不同,来对所引入依赖包来作简单介绍,而关于各插件更多用配置及用法,还请查看相应插件 Github

1K40

gulp之自动化静态资源压缩合并加版本号

gulp之自动化压缩合并加版本号 这个方案主要是为了实现js/css/image压缩合并、自动添加版本号、自动加浏览器前缀压缩html。...'), //js压缩 gulp-imagemin //压缩图片 gulp-htmlmin //压缩html gulp-clean //清空文件gulp-rev //更改版本名 md5后缀 gulp-autoprefixer...//加浏览器前缀 gulp-rev-collector //gulp-rev 插件,用于html模板更改引用路径 目录结构 |- root  |    |-dist  //此目录为下面生成 |       ...'),  //压缩html     clean = require('gulp-clean'),    //清空文件夹     rev = require('gulp-rev'),    //更改版本名...');    //gulp-rev 插件,用于html模板更改引用路径 //清空文件gulp.task('clean', function(){     return gulp.src('dist

1.1K10

快速搭建gulp项目实战

gulp是前端开发过程中对代码进行构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且开发过程中很多重复任务能够使用正确工具自动完成;使用她,我们不仅可以很愉快编写代码,而且大大提高我们工作效率...项目中使用Gulp      1.创建一个文件夹(gulp创建文件夹),进行初始化  cnpm init会出现下面内容,并在文件夹中有一个package.json ?...2.命令中运行安装本地Gulp环境 cnpm install gulp --save-dev 3.本地文件新建文件名为 gulpfile.js 文件:  常用一些方法 gulp.task 定义任务...gulp.src 找到执行文件 gulp.dest 执行任务文件去出 gulp.watch 观察文件是否发生变化 4.安装一些常用压缩包 cnpm install gulp-minify-css...3.js合并   gulp-concat  4.图片压缩 gulp-imagemin 5.less转化成css gulp-less ...... 5.文件中新建一个src目录,用于存放你文件

1.1K20

npm、npm scripts

npm install 命令根据这个配置文件,自动下载所需模块,也就是配置项目所需运行开发环境。...install --save-dev app:将产品开发环境需要依赖模块添加到 package.json devDependencies 中,开发时才用到,发布后用不到它。...大多数内容功能都是基于这个插件系统运行,还可以开发使用开源 webpack 插件,来满足各式各样需求。 webpack使用异步 I/O 多级缓存提高运行效率,使得它能够快速增量编译。...使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是前端开发过程中对代码进行构建工具,是自动化项目的构建利器 gulp不仅能对网站资源进行优化,而且开发过程中很多重复任务能够使用正确工具自动完成...gulp是基于Nodejs自动任务运行器, 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件测试、检查、合并、压缩、格式化、浏览器自动刷新

2.2K41

微信小程序之构建

而这些能力除了CSS 预编译图片压缩之外,其他功能小程序默认已经提供了。所以一个小巧小程序构建只需要支持CSS 预编译图片压缩即可。...Gulp 构建方案 既然涉及到一些任务处理,那么使用 gulp 是最合适不过了。...一般来说,运行构建命令,我们都会从一个源目录(src)到一个目标目录(dev/dist),但是小程序 NPM 能力是不允许 node_modules 根目录之外,这就有了冲突。...第一个我们可以项目配置文件中设置上传代码时候过滤 CSS 文件;第二个我们可以 VSCode 编辑器中隐藏 WXSS 文件,避免误操作。...require('run-sequence'); const postcss = require('gulp-postcss'); const imagemin = require('gulp-imagemin

1K30

基于gulp前端自动化方案

项目目录关系到你gulp脚本里任务路径,脚本里写是匹配所有的目录和文件简单举个例子:这里js/common里js文件也会被处理。如果只想处理特定目录文件,请修改任务路径。...所需要模块,这里直接列举package.json文件内容 { "name": "demo", "version": "0.0.0", "private": true, "dependencies...} } 编写gulp脚本 新建 gulpfile.js文件,并引入所需模块,这里把路径统一写在PATHS中。...{png,jpg,gif,ico}', JS: '**/*.js' } 压缩处理css 这里需要排除node_modules文件生成构建目录/dist/及它们子目录,直接 !...("[complete] Please continue to operate"); }) 部署 终端中输入 gulp或者gulp default执行构建,即可在我们设置产出目录里看到我们压缩处理后代码

1.1K60

Error: Cannot find module gulp-clone问题解决

安装完gulp环境,并且配置好gulpfile.js,执行静态文件压缩代码混淆时,出现如下错误: Error: Cannot find module 'gulp-clone' Error: Cannot...,但是依然会报错,gulp命令可以直接运行,就是配置项中几个模块无法执行。...是后端开发,前端知识也就是马马虎虎,所以这个问题确实难倒了,差不多在网上查资料然后改代码弄了一个小时,依然没有解决。...后来又看了一下报错,既然缺少模块,是不是没有安装啊,这样一想,再去查构建目录,果然是没有安装这些模块,以为安装gulp后就完事儿了。...根据gulpfile.js配置项中需要模块依次安装gulp-clone、gulp-htmlmin、gulp-uglify等模块即可。 执行任务正常

1.4K40

前端工作流

摩登时代 Node.js 出现以前,以往前端开发工作属于石器时代。而随着前端技术大爆炸来临,我们需要赶上这一次潮流,加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。...$ npm init 导入包 这个构建好json文件,将devDependencies下所有节点复制过去。...下面是gulp任务,使用CoffeeScript,然后我会讲解一个任务。...监听文件,当发生改动时调用相应任务 build用于构建编译文件 default默认任务,使用gulp命令执行任务 browser-sync用于开发环境实时更新页面,免去手动刷新烦恼 rebuild...当资源文件更新时让browser-sync重新加载变更 完成这些之后,可以使用gulp + 任务名称执行相应任务 结束语 这是前端工作流,构建静态页面速度是不是一下子就提升了呢。

60310

Gulp 自动化构建案例

('dist')) } module.exports = { style } 复制代码 运行测试: yarn gulp style 复制代码 但是这样输出完毕,却丢失了我们目录结构,该怎么解决好呢...复制代码 这样我们就可以把我们在网页中写死数据放入,就可以进行一些模板渲染了 图片字体压缩 这里我们要进行图片压缩: yarn add gulp-imagemin --dev // 这里有一个坑点...我们要用7.1.0版本imagemin 复制代码 文件修改 const imagemin = require('gulp-imagemin') const image = () => { return...} 复制代码 文件清除 做完这些,我们还需要做一些比较人性化工作,我们每次打包时候文件删除,总不能每次都我们进行手动删除吧?...const imagemin = require('gulp-imagemin'); 复制代码 这样引用我们都可以使用plugins.xxx进行使用,像sass我们就可以直接plugins.sass(

1.4K20

gulp安装使用

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1、去nodejs官网安装nodejs 2、打开命令行,OSX是终端,...//registry.npm.taobao.org 4、全局安装gulp:(c)npm install gulp -g 5、新建package.json到项目根目录【非必选】(josn文件需删除注释,此用来记录项目信息配置初始插件...--save-dev(根据package.json配置,安装组件到项目)   若忽略第五步,则这里执行:(c)npm install gulp --save-dev(仅安装gulp到项目) 7、...gulp.src('style/**/*.scss')//表示css及子文件夹中所以文件 24 .pipe(sass()) 25 .pipe(autoprefixer.../images/sprite'+timestamp+'.png'// 生成样式文件图片引用地址路径,如:backgound:url(..

1.2K50

Hexo-Matery主题性能优化

代码压缩 因为 hexo 生成 html、css、js 等都有很多空格或者换行,而空格换行也是占用字节,所以需要将空格换行去掉也就是要进行 “压缩”。...); //图片压缩组件 var changed = require("gulp-changed"); //文件更改校验组件 var gulpif = require("gulp-if"); //任务 帮助调用组件...(true|处理所有文件)(false|处理有更改文件) var isDebug = true; //是否调试显示 编译通过文件 var gulpBabel = require("gulp-babel...最大一个改变就是gulp.task函数现在支持两个参数,分别是任务运行任务函数 直接在 Hexo 根目录执行 gulp 或者 gulp default ,这个命令相当于 hexo cl&&hexo...path: baidu_urls.txt # 文本文档地址, 链接会保存在此文本文档里 密匙获取是百度自动提交主动推送那里。 ?

1.2K30

gulp+webpack工作流探索

开发时引入 compass编译 |- images 原图片 修改依赖包内容 因为rev默认生成版本号是加在静态文件文件,如main-d3id7340.js这样会造成服务器上有...v=233333这样版本号,配合ssi就能很好维护,以后如果涉及修改静态文件时候,就只用重新上传静态文件ssi页面片就可以了,不需要再去改php中引用,所以在网上找到了一个方法。...nametype,这样每次打包时候就不用把整个项目都打包了,打包需要打包项目。...-- endbuild --> 生成ssi部分,要先创建模板文件,根据压缩cssjs时生成版本号,把相应名字版本号替换掉,然后html里把引用脚本路径改为ssi引用即可 <link rel=...总结 思考工作流时候,思考最多就是如何在php直出并且由后端同事写模版文件情况下做好交付html后期脱离后端同事进行静态文件维护,好像除了用nginx ssi没什么其他好办法再不改模版文件情况下更换静态文件

1.3K20

9012教你如何使用gulp4开发项目脚手架

该脚手架设计思路功能如下: 同时为了提高开发环境效率,这里我们参考webpack配置,区分开发环境生产环境,接下来将会具体介绍。...设计是如果项目使用node等服务层框架,我们可以用gulp一并打包放入dist下,这样dist就是一个完整包括前后端服务项目目录了,当然大家也可以直接将src打包后文件文件夹直接放到dist...在这里要说一点,由于笔者亲测gulp-md5-plus有时候打包不稳定,可能不会给html自动添加对应md5后缀,所以笔者在这块做了特殊处理,如果大家在工作中有更好方案,可以及时笔者沟通交流。...(https://github.com/MrXujiang/gulp4_multi_pages) 最后 该脚手架任然有需要完善地方,比如如何兼容uglifybabel,md5需要使用两次情况,如果更好解决方案...脚手架选型,也不一定非要用gulp,webpack,一般经验是传统型静态网站适合用gulp,由于不需要编译es6,所以有更小体积,当然也可以用webpack,本文主要是给大家提供一使用gulp4

1.4K10

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券