不要放在项目的其它子文件里，文件名就是“gulpfile.js”，不要乱起。...，gulp提供很多接口，可以使用插件 压缩js文件，就需要 gulp-uglify 插件。...(“gulp-concat”); 随后如果要合并index.js和tools.js两个文件 则继续在gulpfile.js的文件中输入如下所示 （ 接着上面的启动监听） 若要压缩则如上所示...，在合并后进行压缩，在合并的文件common.js若再次更改，则继续压缩 执行.pipe(uglify()） 随后在cmd命令行输入 gulp watchall 进行监听 ⑤ 重命名（js文件） 使用...css压缩文件。
3.创建css处理文件任务 主要对css文件进行压缩，然后再将压缩的文件放到指定目录 安装插件 npm install cssnano --save-dev gulpfile.js代码 var gulp.../dest/css/")) done(); }) 4.修改文件名 安装插件 npm install gulp-rename --save-dev gulpfile.js var cssnano.../dest/css/")) done(); }) 5.创建处理js文件的任务 安装插件 npm install gulp-uglify --save-dev gulpfile.js var uglify.../dest/js/")) done(); }) 6.合并多个文件 安装插件 npm install gulp-concat --save-dev gulpfile.js var uglify.../dest/js/")) done(); }) 7.压缩图片 安装插件 npm install gulp-tinypng-nokey -–save-dev gulpfile.js var tinypng_nokey
nodejs gulp gulp入门 npm init 项目初始化 ，此时根目录会出现package.json npm install gulp --save-dev 在本地项目局部安装gulp 创建gulpfile.js...: 0; padding: 0; } p{ color: red } gulpfile.js代码如下 var gulp = require('gulp'); // 需要先安装gulp-cssnano...--save-dev 在本地项目安装 gulpfile.js代码修改如下 var gulp = require('gulp'); // 需要先安装gulp-cssnano var cssnano =...index.html gulpfile.js代码修改如下 var gulp = require('gulp'); var rename = require('gulp-rename'); // 对html...index.html就会被压缩 ? 使用gulp 压缩代码能使项目运行更加的流畅。 ? 最后，祝有所学习，有所成长
1、网络压缩原理 网络压缩的原理是消耗CPU资源，减少文件在公网传输的大小，提高响应速度。...二、网络压缩 此部分所有的压缩内容在浏览器端都会还原，特别需要指出的是图片，图片在网络间是压缩状态传输的，到达浏览器后是会被还原的。...技术实现依托gzip压缩，仅仅在服务器与客户端网络传输时对静态资源进程压缩，文件的大小在压缩前与还原后保持不变。...图片压缩分为两类：一是等比压缩；二是固定宽高压缩。根据应用场景的不同也分为两类：一是固定参数；二是动态参数。 此部分图片压缩后到达浏览器不会被还原。...（一）等比压缩 使用关键词resize实现等比压缩，指定宽度或者高度即可在原尺寸图片的基础上等比率压缩图片。如果同时指定宽度和高度，只有一个参数生效。
参考教程 https://akilar.top/posts/49b73b87/ 前言 gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件...HTML中的ES6语法 npm install gulp-clean-css --save-dev # 压缩css npm install gulp-terser --save-dev # 压缩js...npm install gulp-fontmin --save-dev # 压缩字体包 为Gulp创建gulpfile.js任务脚本。...在博客根目录[Blogroot]下新建gulpfile.js,打开[Blogroot]\gulpfile.js,输入以下内容： //用到的各个插件 var gulp = require('gulp');...JS minifyCSS: true, //压缩页面 CSS minifyURLs: true //压缩页面URL }))
智图是腾讯前端团队开发的一个专门用于图片压缩和图片格式转换的平台 可以对png,jpeg,gif等各类格式图片的压缩，以及为上传图片自动选择最优的图片格式，同时，智图平台还会为用户转换一份webp格式的图片...图片压缩后的质量非常好，而且体积减少很多 测试图片 156KB，压缩后的为 55KB，并且清晰度和原图几乎相同 目前智图支持手动上传（zhitu.isux.us）图片后压缩，和使用gulp插件批量压缩...global gulp （2）安装插件 $ npm install --global gulp-imageisux （3）创建测试项目 test | |-- img |-- test.jpg |-- gulpfile.js...gulpfile.js内容 var gulp = require('gulp'); var imageisux = require('gulp-imageisux'); gulp.task('default...，为空时默认生成dest webp两个目录 第二个参数为是否生成webp图片 （4）运行 在项目目录下执行 $ gulp 运行完成后，img目录下会自动生成两个目录：dest、webp，分别存放压缩后的
gulp-uglify 项目初始化 创建项目 web └─dist └─src ├─css ├─js └─main.js └─index.html └─gulpfile.js...npm init -y package.json内容 gulpfile.js 文件需要自己在项目根目录下新建，整个目录结构如下 使用 gulp 压缩 JS 压缩 js 代码可降低 js 文件大小，提高页面打开速度...在 gulpfile.js 中编写代码 var gulp = require('gulp'); // 导入gulp var uglify = require('gulp-uglify');...另存到dist压缩后的文件 .pipe(gulp.dest('dist/js')) }) 执行命令 > gulp js src/js/ext.js 原始的代码如下 压缩后的代码 gulp... (D:\code\web\gulpfile.js:31:6) at Module.
为什么要使用Gulp 在前端开发中通常需要做，预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作，而使用Gulp可以自动化的完成这些工作，从而提高网站的开发效率，在我的博客使用Less...Less文件编译命令，而使用Gulp可以一次性完成这些操作 Gulp是什么 Gulp是一个可以自动化完成我们开发过程中大量的重复工作的工具，使用Gulp可以自动化的完成如，预处理语言的编译、js文件的压缩...、css文件的压缩、html文件的压缩、图片体积优化等工作 Gulp的特性 易于使用 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理 构建快速 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的...，并且在gulpfile.js中添加下面的代码 Gulp主文件用于注册任务 //载入gulp模块 var gulp = require('gulp'); /** * 注册一个任务 * @param...，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); //文件拷贝任务 gulp.task('copy', function()
gulp定义是：用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本，或者升级历史传统项目，解放你重复打包，压缩，解压之类的操作。...搭建一个简单的前端应用 相比较webpack，其实gulp的项目结构更偏向传统的应用，只是我们借助gulp工具解放我们的一些代码压缩、es6编译、打包以及在传统项目中都可以使用less体验。...= defaultTask; 然后我们在命令行执行 npx gulp 当我们执行npx gulp时会默认运行gulpfile.js导出的default,在gulpfile.js导出的任务会注册到...,在gulp中也是需要借助插件来完成 压缩js与css 压缩js ... const teser = require('gulp-terser'); // todo js任务 const taskJS.../css/*.less'), basePath).pipe(less()).pipe(uglifycss()).pipe(dest(pathDir('dist'))) } // todo 图片资源，有压缩
创建gulpfile.js 在Hexo的根目录，创建一个gulpfile.js文件,打开[Blogroot]/gulpfile.js, 输入 创建在Hexo的根目录，创建一个sw-template.js...拓展内容，使用GULP压缩静态资源 既然已经装了gulp了，干脆把gulp也配置好吧。 都说了是BUG御三家了，用不用取决于你的个人意志哦，现在回头用hexo-offline-popup还来得及。...安装全套压缩插件 将[Blogroot]/gulpfile.js里的内容修改为： 使用了gulp压缩js以后，使用了冰卡诺老师的gitcalendar和本站的右键环形菜单教程的用户，会发现gitcalendar...原因是js加密压缩的算法存在问题。建议直接屏蔽对这两个js的压缩。修改[Blogroot]/gulpfile.js,添加屏蔽项。...事实上这个只是作用于图片压缩，一般也就节省个5kB，而且这个报错不影响网站部署，可以无视。压缩图片还是得靠imagine。
这个文件保存项目的相关信息 第二: npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三: 新建一个gulpfile.js...文件 然后安装js代码检测插件，压缩文件插件，重名名插件(这里只讲一下这三个插件的使用，当然gulp还有很多强大的插件) js代码检测插件： npm install gulp-jslint –save-dev...压缩文件插件： npm install gulp-uglify –save-dev 重名名插件： npm install gulp-rename –save-dev 再安装一下npm install...jslint 然后在gulpfile.js文件里面编写gulp任务代码 var gulp = require("gulp"), jshint = require("gulp-jshint"),....pipe(gulp.dest("dist")); //压缩存放的路径 这里的是根目录下的 dist目录 }); 最后控制台 gulp lint 启动任务
关于Jsdelivr的使用可以直接观看小康大佬的教程-优雅使用JsDeliver加速文件 图片资源加速 压缩图片 压缩图片分为有损压缩和无损压缩。...使用建议:如果没有特别要求，直接使用Imagine进行有损压缩即可。虽然说是有损压缩，但是默认压缩会自主计算压缩程度，一般默认程度就能节省70%空间，且肉眼几乎发现不了图片压缩情况。...安装Gulp插件：在博客根目录[Blogroot]打开终端，输入： 安装各个下属插件以实现对各类静态资源的压缩。在此高呼卓越科技NB！ 为Gulp创建gulpfile.js任务脚本。...在博客根目录[Blogroot]下新建gulpfile.js,打开[Blogroot]\gulpfile.js,输入以下内容： 在每次运行完hexo generate生成静态页面后，运行gulp对其进行压缩...则在[Blogroot]\gulpfile.js中修改js压缩任务的相关配置 ---- 以下内容针对第三方魔改方案进行优化适配。原生主题用户无需在意。
gulp之自动化压缩合并加版本号 这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。...'), //js压缩 gulp-imagemin //压缩图片 gulp-htmlmin //压缩html gulp-clean //清空文件夹 gulp-rev //更改版本名 md5后缀 gulp-autoprefixer... |-src //资源目录 | |-css | |-js | |-images | index.html | gulpfile.js... | package.json gulpfile.js文件 var gulp = require('gulp'), gulpSequence = require('gulp-sequence.../js检查 uglify = require('gulp-uglify'), //js压缩 imageMin = require('gulp-imagemin'), //压缩图片
前端开发的工作往往需要把LESS/SASS编译成CSS文件，对多个JS、CSS文件进行合并与压缩处理，对JS、CSS进行语法的检查等，上面提到的这些都是一些重复性的操作，在开发过程中占据了大量的时间，降低了开发效率...命令行的简单介绍 1 什么是Gulp Gulp是一个前端自动化构建工具，在项目开发过程中，开发工程师可以使用它自动化地完成JavaScript、SASS、LESS、HTML、IMG、CSS等文件的编译、检查、压缩...例如：Grunt的imagemin插件不仅能压缩图片，同时还包括缓存功能。...3.1.5 配置gulpfile.js 说明：gulpfile.js是Gulp的配置文件，放置于项目根目录的js文件。...说明：在这里我们要运行gulpfile.js定义好的gulp_less任务，执行的命令是gulp gulp_less。 ? ? 4 命令行的简单介绍 cd命令定位到具体的目录：cd + 路径。
前言 我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1… 本次目标 es6 转换成 es5 图片压缩 scss编译 模板html...编译 安装gulp yarn add gulp --dev 复制代码 安装完毕之后我们就开始进入正题 样式编译 首先我们使用gulp进行scss的样式编译 gulpfile.js const { src...的基准输出assets/stylesxxx.scss文件 当然我们还需要进行scss的转换，安装 yarn add sass gulp-sass --save-dev 复制代码 然后我们再进行一下改造 gulpfile.js...复制代码 这样我们就可以把我们在网页中写死的数据放入，就可以进行一些模板的渲染了 图片和字体压缩 这里我们要进行图片的压缩： yarn add gulp-imagemin --dev // 这里有一个坑点...sass')); // 脚本编译 const babel = require('gulp-babel') // 模板 const swig = require('gulp-swig') // 图片、svg压缩
了解 了解 gulp 前端自动化打包构建工具 => 打包: 把文件压缩, 整合, 移动, 混淆 了解一下前端的打包构建工具 gulp: 基于流的打包构建工具 webpack: 基于 js 文件的打包构建工具...=> 转码(自动添加前缀) 对于 js 文件 => 压缩 => 转码(ES6 转 ES5) 对于 html 文件 => 压缩 => 转码(对格式的转换) 对于静态资源文件的处理 对于第三方文件的处理...准备一个 gulpfile.js 的文件 + 必须有 + gulp 进行打包的依据 + 每一个项目需要一个 gulpfile.js + 我们再这个文件里面进行本项目的打包配置 + gulp...再运行的时候, 会自动读取 gulpfile.js 文件里面的配置 + 按照你再 gulpfile.js 文件里面的配置进行打包工作 + 注意: **直接写在项目根目录, 和 src 同级**...再 gulpfile.js 里面书写配置文件 + 书写你该项目的打包流程 + 书写完毕以后, 按照打包流程去执行 gulp 指令运行 gulpfile.js 文件 源码和打包以后的内容
Linux 压缩解压命令 zip/unzip，文件后缀名为zip 压缩: zip 123.zip *.txt # 将所有的txt文件压缩成123.zip文件 zip -r test.zip...压缩： bzip2 1.txt # 将1.txt压缩成1.txt.bz2 解压： bunzip2 1.txt.bz2 bzip2 -d 1.txt.bz2 bzip2 -dk...-z: 调用gzip/gunzip进行压缩解压操作，后缀名是.tar.gz -j: 调用bzip2/bunzip2进行压缩解压操作，后缀名是.tar.bz2 -C: 指定解压位置...Copy 注意：tar 只是用来打包和解包的工具，它本身是没有压缩和解压缩的功能。但是，通过添加参数，可以调用gzip或者bzip2进行压缩解压操作。...tar -z: 使用 gzip方式打包并压缩文件，后缀名为 .tar.gz,可以简写为 .tgz tar -j: 使用 bzip2 方式打包并压缩文件，后缀名为 .tar.bzip2,可以简写为
browsers": "last 2 versions, > 1%, ie >= 9" }, "modules": false } ] ] } 新建 gulpfile.js...plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2 } ] ] } 同时修改 gulpfile.js...$ npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs 在修改 gulpfile.js 文件如下： const...js", gulp.series("babel")) }) gulp.task("default", gulp.series(["babel", "watch"])) 使用 sourcemaps 和压缩...注意压缩使用 rollup-plugin-uglify 插件，为了提升打包速度，我们把模块文件放到 src/js/modules 文件夹下，将 gulp.src("src/js/.js") 改为 gulp.src
通过工具自动化运行大量单调乏味、重复性的任务，比如图像压缩、文件合并、代码压缩、单元测试等等，可以为开发者节约大量的时间，使我们能够专注于真正重要的、有意义的工作，比如设计业务逻辑，编写代码等等。...---- Gulpfile.js 文件 与 Grunt 一样， Gulp 也有一个同名配置文件，叫做 gulpfile.js, 在这个文件里定义需要用到什么插件，执行什么任务，如何执行等等。...gulpfile.js 的语法非常简单直接，具有非常好的可读性，便于理解。...在这个例子中，需要 Gulp 去完成两件事： 压缩 Javascript 文件 合并 Javascript 文件 在 Gulp 中，定义任务非常直接，就是调用 Javascript 的方法。.../js/ 目录下所有的 js 文件，一旦文件发生变化，就会自动重新执行 "js" 任务来合并和压缩文件。当然，这行代码通常也要放到某个任务中去运行。
复习一下图片的压缩知识，今天来做一个总结。...什么是质量压缩？ 图片的质量压缩，会改变图片在磁盘中的大小（File文件的大小），不能改变图片在加载时，在内存中的大小。...image.png 质量压缩 那我们就先看bitmapCompress()这个质量压缩的方法。.../** * 这里我们生成了一个Pic文件夹，在下面放了我们质量压缩后的图片，用于和原图对比 * 压缩图片使用Bitmap.compress()，这里是质量压缩 */...我们看一眼原图片和压缩目录(Pic)下有没有文件： 原文件: ? 压缩后的文件： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
