Gulp

Gulp是一款项目自动化的构建工具,与Grunt一样可以通过创建任务(Task)来帮助我们自动完成一些工作流的内容。当然,今天我们的内容并不是讨论这二者的区别,仅仅是介绍介绍如何利用Gulp来优化我们的Web项目中前端自动化工作流。

引言

相信不少人看过百度大牛张云龙的那篇讲解大公司里怎样开发和部署前端代码?的文章,如果没有阅读的朋友请戳。由于在项目部署时,我们需要对项目js,css,image等文件进行压缩,合并处理,从而减少客户端对服务Http请求,已达到增强页面的加载速度,优化服务器带宽压力等等目的。所以本文主要讲的是利用Gulp优化我们Web部署优化工作。

安装&初始化

首先你得确保你的电脑上面是否已经安装了Nodejs, 如果没有安装的话,那么请移步。假定有如下一个Nodejs的Web项目(当然你也可以是其他的例如Java,.Net的Web项目,且具体开发目录如下:

|- project
|- src // 前端项目的源文件
|- js
|- html
|- images
|- css
|- bower_component // bower 前端依赖包管理
|- node_component // nodejs 插件
|- server
|- api
|- views
|- app
|- assets // 前端静态文件存放目录
|- js
|- css
|- images
|- templates
|- ... // 其他目录就不一一列出了

src文件夹为前端的jscsshtmlimage的开发目录, 我们会通过gulp将这些源文件进行压缩合并后打包到目标目录,也就是assets目录下相应的js,css目录,html视图文件会打包到views下的app文件夹和assets下的templates模板文件夹,具体视情况而定。其中的bower_componentbower前端包管理,我们可以用bower直接下载几乎任何我们前端日常所需的库,框架,而且可以任选版本,例如JQuery,Bootstrap,Angular,只需执行bower install packageName即可,不同版本只需bower install packageName#version,更多内容,可以去官网自行查阅,这里就不展开了。至于node_component 文件夹即是用npm安装的我们打包会用到的插件资源了。

  1. 全局安装Gulp

    $ npm install --global gulp
  2. 安装Gulp到开发项目中

    $ npm install --save-dev gulp
  3. 在src创建gulpfile.js文件,这个文件用来配置我们所需的task,接下来会具体讲解。

  4. 执行

    $ gulp
    或者
    $ gulp taskName

    gulp会执行gulpfile.js文件下定义的default任务,如果我们需要执行特定的task,则需要执行下面的命令

gulpfile.js文件

gulpfile.js用来定义我们需要自动化的任务,里面包含了很多依赖关系。这里我们会创建4个Task,第一个develop task,用于开发时使用,另一个release task,用于部署发布时用的,还有一个watch task, 用于实时监听文件修改行为,可及时打包,最后一个default task, gulp默认执行的task.

创建Default Task

    var gulp = require('gulp');

    gulp.task('default', function() {
// place code for your default task here
}); // 如果默认情况下我们会执行一个叫develop的task,则这么写,执行gulp命令时,
// 会自动调用develop
gulp.task('default', ['develop']);

创建Develop Task

创建develop task前,先介绍下我们今天要用到的一些插件

以上列出的插件为我个人常用的一些插件,如果你还有fonts文件的话,也可以添加进去,gulp有很多其他或者相似的插件,都可以去google搜索。安装方法则是正常的npm安装,可以戳进官网去查看。

首先我们需要为我们要压缩的源文件配置路径以及导入插件,假设我们bower里面已有jquery和bootstrap插件,以及其他源文件目录,如下:
// 引入插件
var uglify = require('gulp-uglify'); // 压缩
var minifyCss = require('gulp-minify-css');
var stripDebug = require('gulp-strip-debug'); // 该插件用来去掉console和debugger语句
var useref = require('gulp-useref');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); // 任务处理的文件路径配置
var paths = {
js: [ // js目录
'app/*'
],
css: [
'css/*'
],
img: [
'images/*'
],
html: [
'html/*'
],
lib: { // 第三方依赖文件
js: [
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/jquery/jquery.js'
],
css: [
'bower_components/bootstrap/dist/css/bootstrap.css'
],
img: [
'bower_components/bootstrap/dist/images/*'
]
}
};

定义develop task

var output = "../server/assets/"; // output 

/* 开发环境 */
gulp.task('develop', function() {
gulp.src(paths.js)
.pipe(gulp.dest(output + '/js')); gulp.src(paths.lib.js)
.pipe(gulp.dest(output + '/js')); gulp.src(paths.css)
.pipe(gulp.dest(output + '/css')); gulp.src(paths.lib.css)
.pipe(gulp.dest(output + '/css')); gulp.src(paths.img)
.pipe(gulp.dest(output + '/images')); gulp.src(paths.lib.img)
.pipe(gulp.dest(output + '/images'));
});

上面的develop task直接将代码都输出到了我们的server目录下,并未通过插件进行相应的处理,主要是因为我们等会还会创建release task, 当真正部署的时候我们才进行压缩合并这些处理。

定义release task

/* 部署环境 */
gulp.task('release', function() {
gulp.src(paths.js)
.pipe(stripDebug())
.pipe(gulp.dest(output + '/js')); gulp.src(paths.lib.js)
.pipe(stripDebug())
.pipe(gulp.dest(output + '/js')); gulp.src(paths.css)
.pipe(gulp.dest(output + '/css')); gulp.src(paths.lib.css)
.pipe(gulp.dest(output + '/css')); gulp.src(paths.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(output + '/images')); gulp.src(paths.lib.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(output + '/images')); var assets = useref.assets();
gulp.src(paths.html)
.pipe(assets)
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(output + '/templates'));
});

上面的代码首先是先打包静态文件到指定包,去掉多余的console,debugger,给图片文件进行压缩处理,最后利用useref插件对ejs视图文件中的js,css进行压缩合并处理,并打包到指定目录。

利用useref对html内部的文件进行压缩合并

上面的release中我们以及定义了对app目录下html文件内部的js,css进行压缩何必,仅仅配置task是还不够的,我还需要在html内部做如下配置:

<html>
<head>
<!-- build:css css/main.css -->
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.cs.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/main.js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- endbuild -->
</body>
</html>

经过合并后的文件:

<html>
<head>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<script type="text/javascript" src="js/main.js"></script>
</body>
</htm>

更多关于gulp-useref的使用方法请戳

定义watch Task

watch task 是为了监听文件发生改变后立即触发的任务,已便于我们开发。代码如下:

var watcher = gulp.watch(paths.scripts, ['develop']);
watcher.on('change', function (event) {
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});

总结

以上基本介绍了如何使用gulp来自动完成打包,压缩,合并文件等任务,Gulp插件非常多,本文只是简单的介绍了几种基本的。总之,使用gulp,只需要几行命令便可以完成以上任务,使很多优化工作变得十分简单。

利用Gulp优化部署Web项目[长文慎入]的更多相关文章

  1. 开发过程使用Tomcat Maven插件持续快捷部署Web项目

    我在平时工作中部署Web项目到测试服务器上的Tomcat时用的是Hudson.Hudson本身已经跟SVN.Git.Maven集成并且支持添加各种插件.但如果使用Hudson,我需要配置两个任务:一个 ...

  2. 云服务器部署Web项目

    接着上一篇整好MySQL数据库了,部署Web项目的重要一步就完成了,接下来就是整Tomcat发布项目了,这个博主用的是宝塔面板,所以,也很简单,直接在宝塔面板软件商店选择对应的Tomcat版本安装就行 ...

  3. Tomcat部署web项目,如何直接通过域名访问,不加项目名称

    问题:下面的问题是互联网上问得比较多的,但是显然都是同一个问题. JavaWeb项目部署到tomcat服务之后设置不需要输入项目名称即可访问? Tomcat部署web项目,如何直接通过域名访问,不加项 ...

  4. Tomcat—怎样在Tomcat Webserver下部署Web项目

            总结一下怎样在Tomcat Webserver下部署Web项目:

  5. CentOS6.4虚拟机设置固定IP、安装JDK、Tomcat、Redis并部署web项目

    一.CentOS设置固定IP 1.直接修改配置文件的方式,原文地址:http://www.cnblogs.com/zhja/p/3964159.html (1)首先获取你的GATEWAY 方便后面在c ...

  6. 6.linux下部署 web 项目

    安装java 1.下载 linux 环境的jdk 2.上传该压缩包到 linux 系统中并且解压 tar -zxvf 压缩包名 3.配置环境变量并且刷新配置 export JAVA_HOME=/ali ...

  7. jenkins部署web项目到webogic

    注: Docker容器里安装的jenkins,Docker容易里安装的weblogic 在jenkins里面直接将打包好的 war 包通过 Publish over SSH插件 放入 weblogic ...

  8. 在Linux上部署Web项目

    You believe it or not there is a feeling, lifetime all not lost to time. 在Linux上部署Web项目 这个是普通的web项目, ...

  9. Tomcat手动部署Web项目详细步骤

    阅读须知:文章基于Tomcat8,其它版本若有差异,请自行辨别.本文为博主原创文章,转载请附原文链接. 不借助任何IDE,这里介绍在Tomcat中手动部署web项目的三种方式: 1.部署解包的weba ...

随机推荐

  1. CentOS下安装实时检测网络带宽的小工具bmon

    首先下载rpmforge-release扩展的rpm包 32位操作系统:wget http://www.sudu.us/Tools/bmon/rpmforge-release-0.3.6-1.el5. ...

  2. 用luke看索引

    Luke是一个用于Lucene搜索引擎的第三方工具,它可以访问现有Lucene的索引,并允许您显示和修改.可以看每篇文档建立了哪些索引,验证有没有成功建立了索引.不然建立了,不能确定有没有成功. 可以 ...

  3. 机器学习六--K-means聚类算法

    机器学习六--K-means聚类算法 想想常见的分类算法有决策树.Logistic回归.SVM.贝叶斯等.分类作为一种监督学习方法,要求必须事先明确知道各个类别的信息,并且断言所有待分类项都有一个类别 ...

  4. index merge的一次优化

    手机微博4040端口SQL优化 现象 某端口常态化延迟,通过使用pt-query-digest发现主要由于一条count(*)语句引发,具体如下: # .5s .58M rss, .84M vsz # ...

  5. 17110 Divisible(basic)

    17110 Divisible 时间限制:1000MS  内存限制:65535K 题型: 编程题   语言: 无限制 Description Given n + m integers, I1,I2,. ...

  6. Linux学习之一——开机必备知识

    linux最重要的特色是指令交互,利用一个个指令来进行各种操作.当然可以用X Window获得友好的linux窗口,但是还是有很多局限性. linux用户登录后默认进入 /root目录下. 比较重要的 ...

  7. Hadoop 数据库 - HBase

    转自:http://blog.csdn.net/iAm333 1 什么是HBase? HBase,是Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统.使用HBas ...

  8. Docker与容器快速入门

    Docker之风席卷全球,但很多人觉得docker入门确实不太容易,其原因在于很多知识点上没准备好,在docker解决了什么问题.怎么解决的.用什么技术解决的都还没想清楚的时候就去探索docker组件 ...

  9. 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

  10. 【实践】获取CKEditor的html文本、纯文本、被选中的内容及赋值

      <%=Html.TextAreaFor(Model => Model.WORK_INTRODUCTION)%> <script type="text/javasc ...