前提条件,知道如何安装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 合并和压缩(转)的更多相关文章

  1. gulp打包js/css时合并成一个文件时的顺序解决

    1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...

  2. js css优化-- 合并和压缩

    在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...

  3. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  4. gulp 对js\css进行md5 加密

    有的服务器为了网站加载速度,会做服务器缓存,这样就会出现代码出现引用地址没变,新代码不生效,而我们又希望新代码可以及时生效,这样我们就需要避免缓存,当然也有很多方法,本文只介绍使用gulp-rev(对 ...

  5. gulp 实现 js、css,img 合并和压缩

    前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...

  6. 【web性能】 JS、CSS的合并、压缩、缓存管理

    本篇文章主要讨论下目前JS,CSS 合并.压缩.缓存管理存在的一些问题,然后分享下自己项目中用到的1个处理方案,并提供1个实例下载.   存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发 ...

  7. grunt 压缩js css html 合并等配置与操作详解

    module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...

  8. [转]使用 YCombo 做 JS /CSS开发 合并 压缩

    本文转自:http://www.neoease.com/minimize-javascript-files-using-ycombo/ 前文已介绍过 YCombo 及相关的 CSS 和 JS 合并工具 ...

  9. gulp下静态资源的合并、压缩、MD5后缀

    var gulp = require('gulp'); var RevAll = require('gulp-rev-all'); var uglify = require('gulp-uglify' ...

随机推荐

  1. 前端和后端采用接口访问时的调用验证机制(基于JWT的前后端验证)(思路探讨)

    说明:基于前后端,尤其是使用Ajax请求的接口,现在市面上网页上调用的Ajax基本都是没有验证的,如果单独提取之后可以无线的刷数据. 继上一篇http://www.cnblogs.com/EasonJ ...

  2. Windows下使用Nexus搭建Maven私服(使用)

    注意: 1.从3.0版本的Nexus开始,已经不再缓存https://repo1.maven.org/maven2/的包,所以当安装好之后,在界面上不会有任何的包可以搜索到,但是功能是一切正常的,只有 ...

  3. MySql常用函数积累

    --MySql查看表结构 select column_name,data_type,CHARACTER_MAXIMUM_LENGTH,column_comment from information_s ...

  4. vueSSR渲染原理

    优点:利于搜索引擎,解决白屏问题,因为正常情况下在index.html文件中只有一个简单的标签,没有内容,不利于爬虫搜索 场景:交互少,数据多,例如新闻,博客,论坛类等 原理:相当于服务端前面加了一层 ...

  5. mysql explain 的type解释

    原文:http://blog.csdn.net/github_26672553/article/details/52058782 Explain命令 用于分析sql语句的执行情况和成本预估 今天我们重 ...

  6. hdu 1689 Alien’s Necklace (bfs层次图剪枝)

    Alien's Necklace Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  7. 关于Java基础的一些笔试题总结

    针对近期腾讯.京东.网易等公司的笔试,遇到一些有关Java基础的问题,在此总结,希望能通过这几道经典问题题发散,举一反三,借此打牢基础!自己总结,望提出宝贵意见! 一.关于null的一道小题  先开开 ...

  8. Bean property XX' is not writable or has an invalid setter method

    刚刚搞spring.property注入时遇到这个问题,百度一下.非常多人说是命名或者get set方法不一致的问题,可是这个我是知道的.写的时候也注意到这些.所以应该不是这个问题.以为是xml头写的 ...

  9. register_shutdown_function函数详解

    设定错误和异常处理三函数 register_shutdown_function(array(‘Debug’,'fatalError’)); //定义PHP程序执行完成后执行的函数 set_error_ ...

  10. Arrays.asList基本用法

    目录 说明 基本用法 陷阱 改观 说明 asList 是 java.util.Arrays 类的一个方法 public static <T> List<T> asList(T. ...