gulp 压缩js/css - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

目前做代码压缩合并的工具有很多，诸如gulp，webpack，grunt等等，可以说这些项目构建工具的功能非常之强大：图片压缩、图片转base64、css和js的压缩以及合并，文件的md5重命名 ……。...--save-dev //- gulp插件的核心 npm install gulp-minify-css --save-dev //- 压缩CSS文件 npm install gulp-rev...目前index.html文件中的css和js的引用路径是这样的，如下图： ? 其他目录下的html文件也是这样的，都引用的是未压缩和md5命名的css和js文件。...'); //- 压缩CSS文件； var rev = require('gulp-rev'); //- 对css、js文件名加MD5后缀 var....pipe(clean()); }); /*压缩js文件，并生成md5后缀的js文件*/ gulp.task('compress-js',function (callback) { //-

12.8K8 0

使用gulp压缩合并AngularJS项目中js

toc AngularJS项目中js众多，上线的时候压缩合并下还是很有必要的^_^ 在此之前如果不了解gulp，推荐访问Gulp开发教程（翻译）。...js会破快AngularJS文件所需的依赖注入，以至于无法工作，因此压缩前你需要将代码手动修改为下面的形式： angular.module("MyMod").controller("MyCtrl", [...('gulp-concat'); var minifyCss = require('gulp-minify-css'); var rename = require('gulp-rename');...'); gulp.task('minify', function() { return gulp.src(['js/appService.js','js/app.js']) //注意...')) .pipe(gulp.dest('js/')) });

1.7K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

gulp压缩静态项目

(output)) } // css压缩 function cssHandler(entry, output) { gulp.src(entry).pipe(autoprefixer()).pipe...(minifycss()).pipe(gulp.dest(output)) } // js压缩混淆 function jsHandler(entry, output) { gulp .src.../js/*.js', 'dist/js/'); cssHandler('./css/*.css', 'dist/css/'); done(); }) 执行gulp build就可以了。...刚开始js压缩一直输出不了文件，也没有报错，如果出现这个问题，可以看看bable，这边是@babel/env，之前是@babel/preset-env。...本来还想能不能混淆js，是发现了个插件，但是都说用不了，感兴趣的大佬可以考虑写个gulp的js混淆插件。至于css和html，应该是混淆不了。

6063 0

使用Gulp压缩静态资源

在项目根目录下安装对应插件： # 使用gulp-uglify压缩js npm install --save-dev gulp-uglify # 使用gulp-clean-css压缩css npm install...--save-dev gulp-clean-css # 使用gulp-smushit压缩图片 npm install --save-dev gulp-smushit # 使用gulp-htmlmin压缩.../dist/assets/js')); }) // 压缩css gulp.task('mincss', function() { return gulp.src('...." minifyJS: true, //压缩页面JS minifyCSS: true //压缩页面CSS })) .pipe...//www.cnblogs.com/zlf1914/p/13144381.html gulp压缩html，css，js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

9562 0

基于 gulp 的 fancybox 源码压缩

现在请大家思考这样一个问题倘若我让线上的网站（不论 PC 还是移动端）使用的 css 文件，JS 文件，images 文件等静态资源，JS 是压缩过的，css 是压缩过的，images（主要针对雪碧图）...如果我想找一个东西帮我去处理上面的这些东西，我写的还是没有压缩的 JS 或者 CSS/less/sass 等，但是在页面上实际上运行（或者等到项目发布的时候替换为压缩过的文件），那么 gulp 就是你很好的选择...例如在我的 src 目录里面存在一个 css 文件夹，里面装了很多 css 或者 LESS 等样式文件，我现在想通过 gulp 将它编译到 dist 目录下面的 css 文件夹里面并且这个 css 文件夹里的样式文件还是压缩过了...关于 npm，其实它是一个基于 node.js 的包管理工具，说的通俗一点就是，我们可以通过 npm 这个工具去下载我们想要的包，这些包就是我们在后面需要的各种各样的插件（比如压缩 JS 代码的插件，压缩...即 devDependencies 下列出的模块，是我们开发时用的，比如我们安装 js 的压缩包 gulp-uglify 时，我们采用的是 npm install –save-dev gulp-uglify

1.6K3 0

使用gulp压缩博客静态资源

的使用文档 gulp-fontmin 写在最前 gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。...可以压缩HTML中的ES6语法压缩 CSS： npm install gulp-clean-css --save-dev 压缩 JS Butterfly 主题文档提供了两种压缩 JS 的插件方案。...事实上，当我们使用jsdelivr的CDN服务时，只需要在css或者js的后缀前添加.min, 例如example.js->example.min.js,JsDelivr就会自动使用terser帮我们压缩好代码.../public')) ) //压缩css gulp.task('minify-css', () => { return gulp.src(['....)) 方案二：terser 压缩 js (推荐) //用到的各个插件 var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css

1.1K1 1

性能优化之YUICompressor压缩JS、CSS

性能一直是项目中比较重要的一点，尤其门户网站，对页面的响应要求是很高的，从性能角度上来讲，对于Web端的优化其中重要的一点无疑是JS、CSS文件压缩，图片的融合，尽量减小文件的大小，必免占加载时占用过多的带宽...yuicompressor无疑是一个比较好的压缩工具，是yahoo的一个开源组件，下面介绍yuicompressor压缩JS、CSS文件，及在项目中的使用 yuicompressor介绍 1、首先需要从...$:-min.css' *.css java -jar yuicompressor.jar -o '.js$:-min.js' *.js JavaScript...文件 yuicompressor在项目中的应用上面的压缩只是单个文件，对于批量文件是不适合的，因此需要写一个工具类，递归压缩指定文件夹中所的有js、css文件在pom.xml文件中增加对..."; compressFile(yuiPath, filePath); } /** * 压缩指定文件夹下所有的js/css * * @param yuiPath *

4.8K4 0

简单用php压缩css、js输出

所谓的压缩，无非就是把换行空格等符号替换为空 css css include('第二个CSS文件'); //复制调用更多css文件 ./test1.css ob_end_flush(); //浏览器打开，输出压缩后的内容 ?...> js js include('js文件二'); //复制调用更多JS文件 if (extension_loaded('zlib')) { ob_end_flush...(); //输出压缩后的内容 } ?

1.4K2 0

使用gulp压缩静态博客资源

参考教程 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任务脚本。.../public')) }); //压缩css gulp.task('minify-css', () => { return gulp.src(['...." minifyJS: true, //压缩页面 JS minifyCSS: true, //压缩页面 CSS minifyURLs

8611 0

基于 gulp 的 fancybox 源码压缩

现在请大家思考这样一个问题倘若我让线上的网站（不论 PC 还是移动端）使用的 css 文件，JS 文件，images 文件等静态资源，JS 是压缩过的，css 是压缩过的，images（主要针对雪碧图...如果我想找一个东西帮我去处理上面的这些东西，我写的还是没有压缩的 JS 或者 CSS/less/sass 等，但是在页面上实际上运行（或者等到项目发布的时候替换为压缩过的文件），那么 gulp 就是你很好的选择...例如在我的 src 目录里面存在一个 css 文件夹，里面装了很多 css 或者 LESS 等样式文件，我现在想通过 gulp 将它编译到 dist 目录下面的 css 文件夹里面并且这个 css 文件夹里的样式文件还是压缩过了...关于 npm，其实它是一个基于 node.js 的包管理工具，说的通俗一点就是，我们可以通过 npm 这个工具去下载我们想要的包，这些包就是我们在后面需要的各种各样的插件（比如压缩 JS 代码的插件，压缩...即devDependencies下列出的模块，是我们开发时用的，比如我们安装 js 的压缩包gulp-uglify时，我们采用的是npm install –save-dev gulp-uglify命令安装

1.5K1 0

走近webpack（2）--css打包及压缩js

比如说，可以把less,sass转换成css，可以把es6甚至es7语法转换成大部分浏览器可以运行的js代码。所有的loaders都需要在npm中单独安装并且在module中配置后才可以使用。.../css/index.css' 　　最后一步，也是最重要的一步，我们在webpack.config.js中的module中配置一下我们已经安装好的loader： module:{ rules...] } ] } 　　ok,下面我们来学一下如何压缩JS，我们需要用到uglifyjs-webpack-plugin，一个压缩JS的插件，没错，插件，plugins。...JS压缩通常都是用在生产环境中的。下面来看看html文件是如何打包的。　　先把dist目录下的index.html复制到src目录下，然后把dist目录下的文件都删除。　　...至此我们就学会了打包css，压缩js和打包生成html文件。

3.5K8 0

webpack学习（六）打包压缩js和css

打包压缩js与css 由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin）来完成对JS与CSS的压缩混淆，无需引用额外的插件, 其命令webpack...uglify-js的发行版本只支持ES5，如果你要压缩ES6+代码请使用兼容开发分支。.../src/js/main.js' }, output: { filename: "[name]-[hash].js", path: __dirname +...limit=8192' } ] }, resolve:{ extensions:['.js','.css','.json'...[hash].css"), new webpack.optimize.UglifyJsPlugin({ compress: { //压缩代码

5.4K6 0

走近webpack（2）–css打包及压缩js

2.1K1 0

Hexo博客使用gulp压缩静态资源

错误请执行以下语句 sudo npm i gulp-imagemin --unsafe-perms 3、创建gulpfile.js文件在 Hexo 站点下新建gulpfile.js文件，文件内容如下...removeUseStrict = require("gulp-remove-use-strict"); // 压缩css文件 gulp.task('minify-css', function (done.../public')); done(); }); // 压缩js文件 gulp.task('minify-js', function (done) { return gulp.src([...(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () { console.log...只需要每次在执行 generate 命令后执行 gulp 就可以实现对静态资源的压缩 hexo g gulp

1.4K4 0

Hexo记一次gulp压缩体验

gulp压缩的时候可以省去任务名 gulp.task('minify-html', function() { return gulp.src('..../public')) // 输出的目录 }); // 压缩css gulp.task('minify-css', function() { return gulp.src('..../public')); }); // 压缩js gulp.task('minify-js', function() { return gulp.src(['..../public/**/.js','!./public/js/**/*min.js']) .pipe(uglify()) .pipe(gulp.dest('..../public')); }); // 默认任务 /* gulp.task('default', [ 'minify-html','minify-html1','minify-css','minify-js

1.1K2 0

Asp.net中Js、Css文件压缩辅助类

类名：WebCompressUtility.cs 代码如下： /// /// Js、Css文件压缩辅助类 /// Stone_W /// 2011.6.21 /// public class WebCompressUtility { public WebCompressUtility() { } #region 判断浏览器是否支持指定压缩.../// /// 判断浏览器是否支持指定压缩 /// /// 文件压缩类型...context.Request.Headers["Accept-Encoding"].Contains(ctype.ToString()); } #endregion #region 添加指定的压缩类型.../// /// 添加指定的压缩类型 /// /// 文件压缩类型

3.4K7 0

django 配置django_compressor 2.3 压缩js和css

'compressor.finders.CompressorFinder') 使用首先在html文件中引入标签库 + 引入标签库 {% load compress %} {% compress js...%} js/a.js' %}">...js/b.js' %}"> js/c.js' %}"> {% endcompress %}

1.5K1 0

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

gulp之自动化压缩合并加版本号这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。...先把下面这里插件 npm i （插件名） -D 安装到项目环境内 gulp-sequence //顺序执行任务 gulp-csso //css压缩 gulp-jshint //js检查 gulp-uglify...'), //js压缩 gulp-imagemin //压缩图片 gulp-htmlmin //压缩html gulp-clean //清空文件夹 gulp-rev //更改版本名 md5后缀 gulp-autoprefixer...); }); //压缩css/加浏览器前缀 gulp.task('css', function(){ return gulp.src('src/css/*.css') .pipe...('dist/css')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/css')); }); //压缩js gulp.task

1.3K1 0

精通gulp常用插件

.pipe(gulp.dest('dist')); // 再对所有文件操作，包括index.js 压缩 gulp-uglify 描述：压缩js文件大小。.../hello.js') .pipe(uglify()) // 直接压缩hello.js .pipe(gulp.dest('..../dist')) gulp-csso 描述：压缩优化css。 var csso = require('gulp-csso'); gulp.src('..../css/*.css') .pipe(csso()) .pipe(gulp.dest('./dist/css')) gulp-html-minify 描述：压缩HTML。.../dist')) JS/CSS自动注入 gulp-autoprefixer 描述：自动为css添加浏览器前缀。

1.6K9 0

Nginx网络压缩 CSS压缩图片压缩 JSON压缩

一、序言使用Nginx作为web应用服务时，会代理如下常见文件：js、css、JSON、图片等，本文提供基于Nginx内置的压缩技术，提供网络请求响应速度的解决方案。...技术实现依托gzip压缩，仅仅在服务器与客户端网络传输时对静态资源进程压缩，文件的大小在压缩前与还原后保持不变。...（一）Web资源 1、静态资源前端项目中js/css文件越来越大，对其执行压缩处理越来越有必要。...gzip on; gzip_comp_level 5; gzip_min_length 10K; gzip_types application/javascript text/css; 2、动态资源通过代理后端服务返回的...图片压缩分为两类：一是等比压缩；二是固定宽高压缩。根据应用场景的不同也分为两类：一是固定参数；二是动态参数。此部分图片压缩后到达浏览器不会被还原。

6.6K4 1

点击加载更多

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

使用gulp压缩合并AngularJS项目中js

gulp压缩静态项目

使用Gulp压缩静态资源

基于 gulp 的 fancybox 源码压缩

使用gulp压缩博客静态资源

性能优化之YUICompressor压缩JS、CSS

简单用php压缩css、js输出

使用gulp压缩静态博客资源

基于 gulp 的 fancybox 源码压缩

走近webpack（2）--css打包及压缩js

webpack学习（六）打包压缩js和css

走近webpack（2）–css打包及压缩js

Hexo博客使用gulp压缩静态资源

Hexo记一次gulp压缩体验

Asp.net中Js、Css文件压缩辅助类

django 配置django_compressor 2.3 压缩js和css

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

精通gulp常用插件

Nginx网络压缩 CSS压缩图片压缩 JSON压缩

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐