gulp 实现 js、css,img 合并和压缩(转)
前提条件,知道如何安装nodejs、gulp,这里不做介绍,可以自行google
实现此功能需要安装的gulp工具有如下
npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev
gulp配置文件如下
//在你的项目根目录下创建gulpfile.js,代码如下: // 引入 gulp
var gulp = require('gulp'); // 引入组件
var htmlmin = require('gulp-htmlmin'), //html压缩
imagemin = require('gulp-imagemin'),//图片压缩
pngcrush = require('imagemin-pngcrush'),
minifycss = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'),//js检测
uglify = require('gulp-uglify'),//js压缩
concat = require('gulp-concat'),//文件合并
rename = require('gulp-rename'),//文件更名
notify = require('gulp-notify');//提示信息 // 压缩html
gulp.task('html', function() {
return gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dest'))
.pipe(notify({ message: 'html task ok' })); }); // 压缩图片
gulp.task('img', function() {
return gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest('./dest/images/'))
.pipe(notify({ message: 'img task ok' }));
}); // 合并、压缩、重命名css
gulp.task('css', function() {
return gulp.src('src/css/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('dest/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dest/css'))
.pipe(notify({ message: 'css task ok' }));
}); // 检查js
gulp.task('lint', function() {
return gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(notify({ message: 'lint task ok' }));
}); // 合并、压缩js文件
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dest/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest/js'))
.pipe(notify({ message: 'js task ok' }));
}); // 默认任务
gulp.task('default', function(){
gulp.run('img', 'css', 'lint', 'js', 'html'); // 监听html文件变化
gulp.watch('src/*.html', function(){
gulp.run('html');
}); // Watch .css files
gulp.watch('src/css/*.css', ['css']); // Watch .js files
gulp.watch('src/js/*.js', ['lint', 'js']); // Watch image files
gulp.watch('src/images/*', ['img']);
});
执行下看看效果吧
转载地址: http://www.gowhich.com/blog/621
gulp 实现 js、css,img 合并和压缩(转)的更多相关文章
- gulp打包js/css时合并成一个文件时的顺序解决
1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...
- js css优化-- 合并和压缩
在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- gulp 对js\css进行md5 加密
有的服务器为了网站加载速度,会做服务器缓存,这样就会出现代码出现引用地址没变,新代码不生效,而我们又希望新代码可以及时生效,这样我们就需要避免缓存,当然也有很多方法,本文只介绍使用gulp-rev(对 ...
- gulp 实现 js、css,img 合并和压缩
前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...
- 【web性能】 JS、CSS的合并、压缩、缓存管理
本篇文章主要讨论下目前JS,CSS 合并.压缩.缓存管理存在的一些问题,然后分享下自己项目中用到的1个处理方案,并提供1个实例下载. 存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发 ...
- grunt 压缩js css html 合并等配置与操作详解
module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...
- [转]使用 YCombo 做 JS /CSS开发 合并 压缩
本文转自:http://www.neoease.com/minimize-javascript-files-using-ycombo/ 前文已介绍过 YCombo 及相关的 CSS 和 JS 合并工具 ...
- gulp下静态资源的合并、压缩、MD5后缀
var gulp = require('gulp'); var RevAll = require('gulp-rev-all'); var uglify = require('gulp-uglify' ...
随机推荐
- init.rc文件中面启动c++程序,通过jni调用java实现
</pre><p>注:假设是自己的myself.jar包,还要修改例如以下:</p><p>target/product/core_base.mk PRO ...
- PHP网站渗透中的奇技淫巧:检查相等时的漏洞
PHP是现在网站中最为常用的后端语言之一,是一种类型系统 动态.弱类型的面向对象式编程语言.可以嵌入HTML文本中,是目前最流行的web后端语言之一,并且可以和Web Server 如apache和n ...
- vim中末行去掉^M
在Ubuntu系统中打开文件,发现文件中每一个末行都有^M,我们要做的是知道这一个无关的字符是什么作用,然后删除掉这一个无关的字符. 工具/原料 ubuntu操作系统 Vim编辑器 方法/步骤 ...
- Solidworks 如何绘制投影曲线
1 画一个半圆,然后旋转360°得到一个正圆 2 在视图中任意绘制一条平面曲线(用样条曲线绘制) 3 退出草图,在特征选项卡中点击"投影曲线" 4 将草图2(一条平面曲 ...
- 【C#】高级语言特有的单例模式
public class Singleton { private Singleton () { } // 变量标记为 readonly.第一次引用类的成员或创建实例时,仅仅实例化一次instance对 ...
- C++ 学习总结 复习篇
友元的使用 分为友元类和友元函数 //友元类与友元函数的共同点:都可以让某一个类作为另一个类或者函数的参数. //友元类:它让当前类成为另一个类的友元,然后,另一个类 ...
- Android studio 百度地图开发(2)地图定位
Android studio 百度地图开发(2)地图定位 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...
- IOS 获取设备本地音视频
1.检索音视频 PHFetchOptions *allPhotosOptions; @property (nonatomic, strong) PHFetchResult *assetsFetchRe ...
- 高仿webqq做的一个webos桌面效果和web聊天工具,桌面效果完好,功能强大
QQ技术交流群:159995692 /-------- 暂时开放的測试 帐号/password:[88888888/1;666666/1] ---------/ 正如大家所知的E ...
- SpringInAction4笔记——web
1,java配置 extends AbstractAnnotationConfigDispatcherServletInitializer public class SpitterWebInitial ...