文档章节

使用Glup.JS优化JS、CSS、图片,压缩合并

Billydotzhang
 Billydotzhang
发布于 2016/06/01 14:13
字数 1749
阅读 311
收藏 8

下面进入正题,简单说一下如何安装,使用gulp

1. 安装Gulp

gulp的任务处理机制是,将来源档案当作输入,通过Node.js的Stream操作流,并将流导向gulp的任务处理插件plugins,处理完成后将结果输出到指定输出目录。

从gulp的任务处理机制可以看出,gulp相当于一个任务管理器,而实际的业务处理是由其插件完成的。因此,gulp的安装也包括:安装gulp和安装gulp任务插件两部分。

1.1 安装Gulp

安装gulp,你可以选择全局安装或安装在项目的dev开发环境下。

全局安装gulp:

 

npm install gulp -g

 

在项目的dev开发环境中安装:

 

 

npm install gulp --save-dev


1.2 安装Gulp插件在开发环境安装后,会在项目package.json文件的devDependencies节点下保存。建议对gulp使用全局安装,这样可以在所有项目中使用。全局安装对于非Node.js项目尤为适用。

gulp插件的安装,也可以使用全局安装或安装在dev开发环境,本站比较推荐使用全局安装。gulp插件可以按需安装,如果你只需要处理CSS,那么只安装CSS相关处理插件即可。gulp的所有插件请参考:Gulp插件。对于CSS文件处理、JS文件处理、图片处理,你可能需要以下插件:

gulp-ruby-sass:基于ruby和sass的Sass文件编译,可将Sass文件为CSS文件

gulp-autoprefixer:Autoprefixer,可以解析CSS文件,并且添加浏览器前缀到CSS规则里

gulp-minify-css:CSS文件压缩工具

gulp-jshint:JSHint,一个JS代码检查工具,可以检测JavaScript中错误和潜在问题

gulp-uglify:uglify,JS代码优化工具,可用于压缩和美化(或者叫“丑化”)javascript代码

gulp-concat:文件拼接工具,可用于多个CSS文件或多个JS文件的合并

gulp-imagemin:imagemin,图片压缩工具

一般来说上面介绍的插件可以满足一般前端资源的处理,比如:less和sass文件的编译、CSS文件的合并压缩、JS文件的合并压缩、图片的压缩。在日常工作中,你可能还需要一些处理,像执行gulp任务前清理目录、服务端资源的监控、只针对变更资源的处理等,下面的一些插件可能会用到:

gulp-clean:目标目录清理,在用于gulp任务执行前清空目标目录

gulp-cache:资源缓存处理,可用于缓存已压缩过的资源,如:图片

gulp-notify:任务通知工具,可用于某项任务执行完成的在控制台输出通知

gulp-livereload:服务器资源监控,当服务端资源变化时对页面进行刷新。需要要配合浏览器插件使用或在页面这样处理,使用比较复杂,非必要时不推荐使用

在dev开发环境下安装这些插件:

 

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

2.1 gulp一些常用的API2. 使用Gulp

要深入了解gulp,建议查看其官方文档。对于一般使用gulp,了解下面几个API,即可满足日常需求:

gulp.task():方法用来定义任务,内部使用的是Orchestrator

gulp.src():gulp是基于Node.js的流进行任务转接及处理的,gulp.src()用于引入流,即:读取要操作的文件。可以是下面几种:

/public/js/index.js:指定的一个文件

/public/js/*.js:某个目录下的所有文件

/public/**/*.js:目录下及其所有子目录下的所有js文件

!/public/js/main.js:某个目录下,除main.js以外的所有js文件

*.+(js|css);正则表达式匹配根目录下扩展名是js和css的所有文件

gulp.dest():在指定路径输出文件。只能对其指定路径,而不能对输出文件重命名,重命名可以使用插件gulp-rename

gulp.watch():监视文件的变化(如:CSS、JS、图片),当文件发生变化后,我们可以利用它来执行相应的任务

2.2 gulp使用示例

以expressWeb框架为例

在全局安装gulp及相关插件后,创建gulpfile.js文件(在本例中,文件在项目根目录下)。gulpfile.js文件内容如下

 


在项目根目录下,执行命令:执行gulp命令前,public目录结构是下面这样的:

var gulp = require('gulp'),  
  //  sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
 
// 样式处理任务
gulp.task('styles', function() {  
  return gulp.src('public/stylesheets/*.css')    //引入所有CSS
    .pipe(concat('main.css'))           //合并CSS文件
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('public/dist/css'))      //完整版输出
    .pipe(rename({ suffix: '.min' }))   //重命名
    .pipe(minifycss())                  //CSS压缩
    .pipe(gulp.dest('public/dist/css'))      //压缩版输出
    .pipe(notify({ message: '样式文件处理完成' }));
});
 
// 如果需要通过scss文件编译css,就使用这段代码
// gulp.task('styles', function() {  
//   return gulp.src('public/html/css/main.scss')
//     .pipe(sass({ style: 'expanded', }))
//     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//     .pipe(gulp.dest('public/dist/styles'))
//     .pipe(rename({ suffix: '.min' }))
//     .pipe(minifycss())
//     .pipe(gulp.dest('public/dist/styles'))
//     .pipe(notify({ message: 'Styles task complete' }));
// });
 
// JS处理任务
gulp.task('scripts', function() {  
  return gulp.src('public/javascripts/*.js')      //引入所有需处理的JS
    .pipe(jshint.reporter('default'))         //S代码检查
    .pipe(concat('main.js'))                  //合并输出的JS文件名称
    .pipe(gulp.dest('public/dist/js'))        //完整版输出路径
    .pipe(rename({ suffix: '.min' }))         //重命名
    .pipe(uglify())                           //压缩JS
    .pipe(gulp.dest('public/dist/js'))        //压缩版输出路径
    .pipe(notify({ message: 'JS文件处理完成' }));
});
 
// 图片处理任务
gulp.task('images', function() {  
  return gulp.src('public/images/*')        //引入所有需处理的JS
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))      //压缩图片
    // 如果想对变动过的文件进行压缩,则使用下面一句代码
    // .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 
    .pipe(gulp.dest('public/dist/img'))
    .pipe(notify({ message: '图片处理完成' }));
});
 
// 目标目录清理
gulp.task('clean', function() {  
  return gulp.src(['public/dist/css', 'public/js', 'public/img'], {read: false})
    .pipe(clean());
});
 
// 预设任务,执行清理后,
gulp.task('default', ['clean'], function() {  
    gulp.start('styles', 'scripts', 'images');
});
 
// 文档临听
gulp.task('watch', function() {
 
//  // 监听所有.scss文档
//   gulp.watch('src/styles/**/*.scss', ['styles']);
 
    // 监听所有css文档
    gulp.watch('public/html/css/*.css', ['styles']);
 
    // 监听所有.js档
    gulp.watch('public/html/js/*.js', ['scripts']);
 
    // 监听所有图片档
    gulp.watch('public/html/img/*', ['images']);
 
//   // 创建实时调整服务器 -- 在项目中未使用注释掉
//   var server = livereload();
//   // 监听 dist/ 目录下所有文档,有更新时强制浏览器刷新(需要浏览器插件配合或按前文介绍在页面增加JS监听代码)
//   gulp.watch(['public/dist/**']).on('change', function(file) {
//     server.changed(file.path);
//   });
 
});

 

gulp

执行gulp命令后,public目录结构是下面这样的:

gulp操作成功,文件被输出到了publi/dist目录下,CSS和JS文件都有完整版和压缩版两个,

图片也经过了压缩处理。如果需要进行其它处理,可自行修改gulpfile.js文件代码。

本文转载自:http://www.dvy.com.cn/2016/04/14/2817.html

Billydotzhang
粉丝 8
博文 45
码字总数 20916
作品 0
崇明
私信 提问
web前端性能评测和常规优化方案

如何评测前端性能和优化? 前端开发页面要遵循的基本标准: 1. 统一使用框架、样式表base 2. html、CSS、JS编码要符合前端基本规范 3. CSS、JS进行压缩,多个CSS、JS时,需要进行CDN合并 4....

psasjs
2018/07/30
0
0
.NET性能调优之三:YSlow相关规则的调优工具和方法

.NET性能调优系列文章 系列文章索引 .NET性能调优之一:ANTS Performance Profiler的使用 .NET性能调优之二:使用Visual Studio进行代码度量 .NET性能调优之三:YSlow相关规则的调优工具和方...

达摩院法师
2013/01/08
0
0
10 款用于提升 WordPress 性能的插件

WordPress 已经成为最受欢迎的博客以及网站内容管理系统(没有之一),WordPress 最强大的在于其庞大的开发者社区,为 WP 开发出很多的插件,本文向大家介绍 10 款用于提升 WP 性能的插件。 ...

红薯
2011/07/11
1K
4
前端性能优化指南

在“A Node.JS Holiday Season”系列丛书的这一章中,我们将会讨论一些前端性能和介绍一些基于Mozilla的快速开发工具。 我们将要使用前段性能自动化中非常重要的工具之一的connect-cachify。...

Jeky
2013/01/17
4.9K
4
前端开发优化的一些常见方法汇总

WEB前端开发常用的优化技巧汇总 减少HTTP请求的次数或者减小请求数据的大小 页面中每发送一次HTTP请求,都需要完成请求加响应这个完整的HTTP事务,会消耗一些时间,也可能会导致HTTP链接通道...

无敌UFO
04/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 linuxdeployqt qt5.13.1 打包程序

原文链接:https://www.cnblogs.com/linuxAndMcu/p/11016322.html 一、简介 linuxdeployqt 是Linux下的qt打包工具,可以将应用程序使用的资源(如库,图形和插件)复制到二进制运行文件所在的...

shzwork
昨天
4
0
IDEA 配置Springboot项目热部署

实现的方式概述 注意以下的热部署方式在IDEA是默认没有打开自动编译的,手动编译需要快捷键(Ctrl+Shift+F9),自动编译的修改配置如下:(注意刷新不要太快,会有1-2秒延迟) File-Settings-C...

小强的进阶之路
昨天
9
0
免费数据分析工具:secsoso

前段时间思考了理想数据分析平台,之后我们根据这个思路开发了spl语言并提供了一个数据分析平台,这个平台主要用在搜索ES,数据库索引中的数据。但后来发现对文件的事后处理也是个非常重要的...

赛克蓝德
昨天
5
0
暗黑2不能正常启动?带你轻松使用WIN10运行游戏

暗黑破坏神2这款游戏由于年代比较久远,所以设置启动这方面与现在的大部分游戏有很大差距,由于当初完美运行暗黑2是当年使用最多的XP系统,在使用现在大多数玩家使用的WIN7到WIN10系统常会出...

太空堡垒185
昨天
6
0
maven项目对象模型(二)

1.4.4.传递性依赖 一个传递性依赖就是一个依赖的依赖。如果project-a依赖于project-b,而后者接着依赖于project-c,那么project-c就是被认为是project-a的传递性依赖。如果project-c依赖于p...

万建宁
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部