gulp入门-压缩js/css文件(windows)
类似于grunt,都是基于Node.js的前端构建工具。不过gulp压缩效率更高。
工具/原料
- nodejs/npm
方法/步骤
首先要确保pc上装有node,然后在global环境和项目文件中都install gulp
npm install gulp -g (global环境)
npm install gulp --save-dev (项目环境)
在项目中install需要的gulp插件,一般只压缩的话需要
npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
更多插件可以在这个链接中找到 http://gratimax.net/search-gulp-plugins/
注:gulp-minify-css(css压缩)、 gulp-concat(文件合并)、 gulp-uglify(js压缩)、 gulp-rename(重命名文件)
在项目的根目录新建gulpfile.js,require需要的module
var gulp = require('gulp'), minifycss = require('gulp-minify-css'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), del = require('del');
- 压缩css
gulp.task('minifycss', function() { return gulp.src('src/*.css') //压缩的文件 .pipe(gulp.dest('minified/css')) //输出文件夹 .pipe(minifycss()); //执行压缩 });
- 压缩js
gulp.task('minifyjs', function() { return gulp.src('src/*.js') .pipe(concat('main.js')) //合并所有js到main.js .pipe(gulp.dest('minified/js')) //输出main.js到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest('minified/js')); //输出 });
- 执行压缩前,先删除文件夹里的内容
gulp.task('clean', function(cb) { del(['minified/css', 'minified/js'], cb) });
- 默认命令,在cmd中输入gulp后,执行的就是这个命令
gulp.task('default', ['clean'], function() { gulp.start('minifycss', 'minifyjs'); });
- 然后只要cmd中执行,gulp即可
gulp入门-压缩js/css文件(windows)的更多相关文章
- MVC打包压缩JS&CSS文件调试时过滤了一些文件
BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件: 后台跟踪了 ...
- 开箱即用 - Grunt合并和压缩 js,css 文件
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...
- IIS7.5打开GZip压缩,同时启用GZip压缩JS/CSS文件的设置方法[bubuko.com]
IIS7.5或者IIS7.0开启GZip压缩方法:打开IIS,在右侧点击某个网站,在功能视图中的“IIS”区域,双击进入“压缩”,如图下图: 分别勾选“启用动态内容压缩”和“启用静态内容压缩”.这样最 ...
- Web网站配置Gzip,压缩js css文件
启用apache的gzip 找到httpd.conf,打开文件找到对mod_deflate的注释 #LoadModule deflate_module modules/mod_deflate.so 去 ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度
使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
随机推荐
- [AGC002D] Stamp Rally (并查集+整体二分)
Description 给你一个n个点m个条边构成的简单无向连通图,有Q组询问,每次询问从两个点x,y走出两条路径,使这两条路径覆盖z个点,求得一种方案使得路径上经过的变的最大编号最小. Input ...
- HDOJ 1085 Holding Bin-Laden Captive!
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- Firebug Console API
原文发布时间为:2011-06-06 -- 来源于本人的百度文章 [由搬家工具导入] Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下 ...
- 为了兼容性问题,本人一律淘汰不兼容如下三种浏览器的js
原文发布时间为:2009-04-16 -- 来源于本人的百度文章 [由搬家工具导入] JavaScript: 不兼容 IE FF火狐 Google 一律不作收藏了。。。。 最好还能兼容 Op ...
- hdu 6218 Bridge 线段树 set
题目链接 题意 给一个\(2\)x\(n\)的矩阵,每个格子看成一个点,每个格子与相邻的格子间有边.现进行一些加边与删边操作,问每次操作后图中有多少条割边. 思路 参考 https://www.cnb ...
- AC日记——Oulipo poj 3461
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 37958 Accepted: 15282 Description The ...
- python接口自动化(四十)- logger 日志 - 下(超详解)
简介 按照上一篇的计划,这一篇给小伙伴们讲解一下:(1)多模块使用logging,(2)通过文件配置logging模块,(3)自己封装一个日志(logging)类.可能有的小伙伴在这里会有个疑问一个l ...
- Ceres Solver: 高效的非线性优化库(一)
Ceres Solver: 高效的非线性优化库(一) 注:本文基于Ceres官方文档,大部分由英文翻译而来.可作为非官方参考文档. 简介 Ceres,原意是谷神星,是发现不久的一颗轨道在木星和火星之间 ...
- Hadoop OutputFormat浅析
问题:reduce输出时,如果不是推测任务写结果时会先写临时目录最后移动到输出目录吗? 下面部分转自Hadoop官网说明 OutputFormat 描述Map/Reduce作业的输出样式. Map/R ...
- vue开发小程序简介
开发环境搭建 nodejs 安装最新版的nodejs,同时安装cnpm包管理器 jdk1.8 apache-maven3.3.9 Intellij Idea2018 [后端开发工具] vscode[前 ...