前端工程化 | 定制专属提速“外挂”(上)

友情提示:推荐阅读时间15分钟 + 练习时间15分钟

HTML5学堂:上一期给大家分享了Gulp的安装与使用,让大家对Gulp有着初步的认识。咱们学习使用Gulp的目的是提升开发效率,把开发过程中重复性的工作交给Gulp,让Gulp按照你的配置去完成操作

Gulp本身给开发者提供了5个API接口,可以根据这些接口来开发Gulp插件。但是,Gulp目前拥有丰富的插件资源,开发人员可以根据项目的需求和个人偏好来配置使用这些插件,比如可以配置当修改了HTML文件浏览器自动刷新,也可以配置修改了CSS文件浏览器自动刷新。今天的文章主要给大家分享Gulp插件的安装与使用: 浏览器自动刷新、CSS压缩、文件合并。

本文内容概要

1 为何不用npm,而选用cnpm

2 浏览器自动刷新

3 文件合并

4 CSS文件压缩

1 为何不用npm,而选用cnpm

原因:因为npm安装插件是从境外服务器下载,在境内受网络影响很大,容易出现异常,于是淘宝团队在境内做了一个npm的镜像,使用淘宝团队定制的cnpm命令行工具来安装插件。简单的理解就是定期从境外服务器拷贝一份数据放在境内的服务器,使用cnpm来安装插件就是从境内服务器下载,这样就能够快速、稳定的安装Gulp插件了。

http://npm.taobao.org官网的说明:“这是一个完整 npmjs.org镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

安装:$ npm install cnpm -g --registry=https://registry.npm.taobao.org;

提醒:安装完后最好查看其版本号cnpm -v或关闭命令提示符再重新打开,防止使用时出现问题;另外,cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm。

2 浏览器自动刷新

F5键对于网页开发工程师来说再熟悉不过了,也是使用频率超高的一个键。网页开发工程师使用F5键的目的是及时预览当前网页开发的效果,方便他们对网页进行调试与修改。但是,在开发的过程中我们是希望当我们对网页文件(包括HTML、CSS、JS、LESS文件等)做了修改,浏览器能够自动刷新网页。这样的好处在于每次修改代码后,开发工程师不用去按F5键或移动鼠标到浏览器选中刷新查看效果,节省了大量重复性的操作时间,进一步提高了开发效率。今天我们要在Gulp中使用的这款插件叫browser-sync。

browser-sync是一款浏览器同步测试工具,可以单独使用,也可以插入到Gulp、Grunt等工作流里使用,该篇文章主要介绍browser-sync在Gulp中的使用。

2.1 安装:browser-sync

命令行:$ cnpm install --save-dev browser-sync

2.2 在gulpfile.js中引入browser-sync插件

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

2.3 建立浏览器自动刷新服务器

gulp.task('f5', function(){
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
});

2.4 监听文件

下面的例子是监听项目中所有的HTML文件,大家也可以试试其他文件的监听。

gulp.watch(['./**/*.html']).on('change', reload);

2.5 完整的配置代码

// 引入Gulp安装好的插件 require('模块名称') 
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
 
// 定义一个f5任务,名称自定义即可
gulp.task('f5', function(){
    browserSync.init({
        server: {
            baseDir: './'
        }
    });


    gulp.watch(['./**/*.html']).on('change', reload);
});

Tips:Ctrl + C可以终止browser-sync的运行。

2.6 查看browser-sync使用效果

Tips:gulp + 任务名称是用来执行gulp的任务。

3 文件合并

在项目开发完成后,我们需要对项目进行优化,文件合并是必不可少的一个环节,比如CSS文件合并、JS文件合并,因为一个文件对应一个请求,过多的文件会造成请求阻塞、服务器的请求压力等一系列问题。在这边我们可以使用Gulp的文件合并插件gulp-concat来解决这个问题。

3.1 安装:gulp-concat

命令行:$ cnpm install gulp-concat --save-dev

3.2 在gulpfile.js中引入gulp-concat插件

var concat = require('gulp-concat');

3.3 配置gulp-concat的功能

gulp.task('concatFile', function () {
 // 需要合并的文件
    gulp.src('css/*.css')
    //合并后的文件名
    .pipe(concat('common.css'))
    // 合并后的文件所在的文件夹
    .pipe(gulp.dest('dist/css'));
});

3.4 完整的配置代码

// 引入Gulp安装好的插件 require('模块名称') 
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var concat = require('gulp-concat');
 
// 定义一个f5任务,名称自定义即可
// 浏览器自动刷新
gulp.task('f5', function(){
    browserSync.init({
        server:{
            baseDir:'./'
        }
    });


    gulp.watch(['./**/*.html']).on('change', reload);
});


// 文件合并
gulp.task('concatFile', function () {
 // 需要合并的文件
    gulp.src('css/*.css')
    //合并后的文件名
    .pipe(concat('common.css'))
    // 合并后的文件所在的文件夹
    .pipe(gulp.dest('dist/css'));
});

3.5 查看gulp-concat使用效果

4 CSS文件压缩

在项目上线前我们会对HTML、CSS、JS等文件进行压缩处理,一方面可以提升网站的加载速度,另外一方面可以减少带宽,降低网络负荷。在Gulp中可以使用gulp-clean-css对CSS文件进行压缩处理。

Tips:带宽是指在单位时间(一般指的是1秒钟)内能传输的数据量。网络和高速公路类似,带宽越大,就类似高速公路的车道越多,其同行能力越强。

4.1 安装:gulp-clean-css

命令行:cnpm install gulp-clean-css --save-dev

4.2 在gulpfile.js中引入gulp-clean-css插件

var cleanCSS = require('gulp-clean-css');

4.3 配置gulp-clean-css的功能

// CSS文件压缩
gulp.task('cssMin', function() {
 // 需要压缩的CSS文件
    gulp.src('css/*.css')
    // CSS文件压缩
    .pipe(cleanCSS())
    // 压缩后的C文件所在的文件夹
    .pipe(gulp.dest('dist/css'));
});

4.4 完整的配置代码

// 引入Gulp安装好的插件 require('模块名称') 
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
 
// 定义一个f5任务,名称自定义即可
// 浏览器自动刷新
gulp.task('f5', function(){
    browserSync.init({
        server:{
            baseDir:'./'
        }
    });


    gulp.watch(['./**/*.html']).on('change', reload);
});


// 文件合并
gulp.task('concatFile', function () {
 // 需要合并的文件
    gulp.src('css/*.css')
    //合并后的文件名
    .pipe(concat('common.css'))
    // 合并后的文件所在的文件夹
    .pipe(gulp.dest('dist/css'));
});


// CSS文件压缩
gulp.task('cssMin', function() {
 // 需要压缩的CSS文件
    gulp.src('css/*.css')
    // CSS文件压缩
    .pipe(cleanCSS())
    // 压缩后的C文件所在的文件夹
    .pipe(gulp.dest('dist/css'));
});

4.5 查看gulp-clean-css使用效果

视频内容

本文系HTML5学堂独家内容,转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-11-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏雨过天晴

转 树莓派无显示器安装系统

1182
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理 前情回顾 在《Vue2+VueRoute...

1747
来自专栏Python爬虫实战

Python爬虫:爬取在线教程转成pdf

1、网站介绍2、准备工作2.1 软件安装2.2 库安装3、爬取内容3.1 获取教程名称3.2 获取目录及对应网址3.3 获取章节内容3.4 保存pdf3.5 合...

611
来自专栏极客猴

学会运用爬虫框架 Scrapy (四) —— 高效下载图片

爬虫程序爬取的目标通常不仅仅是文字资源,经常也会爬取图片资源。这就涉及如何高效下载图片的问题。这里高效下载指的是既能把图片完整下载到本地又不会对网站服务器造成压...

702
来自专栏JadePeng的技术博客

weex官方demo weex-hackernews代码解读(下)

weex 是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,IOS和Android。而weex-hacknews则是weex...

3548
来自专栏深度学习那些事儿

ubuntu16.04下安装NVIDIA(cuda)-gtx965m相关步骤以及问题

ubunt版本:16.04 笔记本:机械革命,i7-6700,gtx965m(集显Intel Hm170 ) 安装NVIDIA以及cuda来测试深度学习

1804
来自专栏iOS开发随笔

20161216微信支付 全程配置

862
来自专栏Python数据科学

3款你必须知道的爬虫工具

本篇博主将和大家分享几个非常有用的爬虫小工具,这些小工具在实际的爬虫的开发中会大大减少你的时间成本,并同时提高你的工作效率,真的是非常使用的工具。

461
来自专栏IMWeb前端团队

npm 中如何下载特定的组件版本

本文作者:IMWeb helinjiang 原文出处:IMWeb社区 未经同意,禁止转载 本文详细讨论了 npm 中依赖版本的版本号配置写法及比较。 ...

1796
来自专栏IT杂记

Pandoc安装实现Markdown转PDF (CentOS6)

Pandoc简介 pandoc 是一种文档标记语言转换工具,可实现不同文档标记语言间的格式转换,由Haskell语言编写,以命令行的形式实现与用户的交互,可支持...

2176

扫描关注云+社区