Web前端构建工具---Gulp
Posted IT综合技术服务
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端构建工具---Gulp相关的知识，希望对你有一定的参考价值。
前言
现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。
前端自动化构建工具有很多，我知道的就有Bower、Gulp、Grunt、WebPack等。本文将介绍使用Gulp来完成js、css、压缩及文件合并、浏览器同步(即修改了页面代码或者css立马在浏览器中呈现)。
实现
要想实现以上的功能需要安装几个组件，组件的安装依赖node.js、npm；
所以事先请安装好Node.js、npm是 Node 的包管理器。安装其它组件必须要用到npm命令。
程序目录结构
node_modules：使用npm安装的所有依赖的node包全下载在这个文件夹中。
web：站点的根目录
webuild：js、css文件压缩后的输出目录
websrc：静态文件目录
websrcless：预处理Less文件目录
webindex.html：初始页面
gulpfile.js：运行gulp的配置文件。
package-lock.json：node包管理器的模块依赖关系配置文件
安装Gulp
假设您已安装好node和npm，本文不再描述如何安装Node和npm。可自行去官方网站下载安装。
win+r 打开命令行，cd到项目的根目录。依次执行下面的步骤。
1、全局安装gulp
npm install --global gulp
2、在项目中安装gulp。（注：这是将该组件安装在项目根据目录，并在 package-lock.json中自动配置好依赖）
npm install gulp --save-dev
3、在项目根目录下创建一个名为 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
4、运行gulp。将执行默认的task。
至此gulp已安装完成。为后续的使用打好基础了。
代码编写
1、index.html 在根目录新建index.html
2、测试less文件编写
在websrcless目录新建一个less文件命名为myapp.less；名称随意
less文件中内容如下：
@base: #EDEDED;
.menu{
color:@base;
font-size:16px;
background-color: @base;
}
3、新建测试压缩的css文件 app.css和index.css
index.css
body{
font-size: 12px;
color: #333;
}
ul>li{
display: inline-block;
height: 30px;
padding: 10px;
line-height: 30px;
}
a{
text-decoration: blink;
color: #333333;
}
app.css
*{
margin: 0;
padding: 0;
}
.container{
width: 70%;
background-color: #fff;
}
4、新建测试压缩js文件
app.js
!function(){
var app={
show:function(mes){
console.log(mes);
console.log('123');
}
};
window.app = app;
}();
index.js
(function($app){
var Page = function(){};
Page.prototype.Say=function(mes){
$app.show(mes);
};
var myPage = new Page();
myPage.Say('Hello Gulp 1232');
}(window.app))
5、在index.html页面中引用压缩过后的js和css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Gulp</title>
<link href="build/styles/myStyle.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="height: 300px" >
<ul>
<li class="menu">
<a href="http://www.baidu.com" target="_blank">百度</a>
</li>
<li class="menu">
<a href="http://www.sina.com.cn" target="_blank">新浪</a>
</li>
<li class="menu">
<a href="http://www.163.com" target="_blank">网易</a>
</li>
</ul>
</div>
<script src="build/js/app.min.js"></script>
<script src="build/js/index.min.js"></script>
</body>
</html>
6、安装Gulp所依赖的组件
a)、npm install gulp-connect --save-dev 该组件相当于一个web服务器
b)、npm install gulp-less --save-dev gulp利用该组件将less文件编译成css文件
c)、npm install gulp-minify-css --save-dev css文件进行压缩组件
d)、npm install gulp-concat --save-dev 文件合并组件
e)、npm install gulp-uglify --save-dev js文件压缩组件
f)、npm install gulp-rename --save-dev 文件重命名组件
7、编写gulpfile.js
gulpfile.js是gulp的运行时任务配置js文件，gulp会根据我们配置的任务，来执行。
以下代码逻辑解释如下：
首先引入gulp基础库，然后再引入 了我们在上一节讲到的几个需要用到的组件。
接下来，给gulp添加了一个任务servers ，在该任务中会创建一个服务器端口并监听。gulp.watch() 是监听某个目录下文件发生变化时，会执行里面的任务，此处为 当文件发生变化将执行less、minifycss、minifyjs、reload任务。
最后面是各任务的内部配置，相对比较简单，不再赘述！
// 引入 gulp及组件
var gulp=require('gulp'), //gulp基础库
gulp_connect = require('gulp-connect'),//服务器连接监听组件
gulp_less = require('gulp-less'),//less编译器组件
minifycss=require('gulp-minify-css'),//css压缩
concat=require('gulp-concat'), //合并文件
uglify=require('gulp-uglify'), //js压缩
rename=require('gulp-rename'); //文件重命名
var notify=require('gulp-notify'); //提示
gulp.task('servers',function(){
//创建一个服务器端口 默认8080
gulp_connect.server({
root:'web',
livereload:true
});
//
gulp.watch('web/**/*.*',
['less','minifycss','minifyjs','reload']);
//监听web目录下的文件变化，当有变化时候执行[]中的任务
});
//部署浏览器自动刷新任务
gulp.task('reload',function(){
gulp.src('web/**/*.*')
.pipe(gulp_connect.reload());
});
//部署less编译任务
gulp.task('less',function(){
gulp.src('web/src/less/*.less')
.pipe(gulp_less()).pipe(minifycss())
.pipe(gulp.dest('web/src/css/'));
});
//css处理任务
gulp.task('minifycss',function(){
return gulp.src('web/src/css/*.css') //设置css
.pipe(concat('myStyle.css')) //合并css文件到"myStyle"
.pipe(gulp.dest('web/build/styles')) //设置输出路径
.pipe(rename({suffix:'.min'}))//修改文件名
.pipe(minifycss()) //压缩文件
.pipe(gulp.dest('web/build/styles'))//输出文件目录
.pipe(notify({message:'css task ok'})); //提示成功
});
//JS处理任务
gulp.task('minifyjs',function(){
return gulp.src(['web/src/js/index.js',
'web/src/js/app.js']) //选择合并的JS
.pipe(rename({suffix:'.min'})) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest('web/build/js')) //输出
.pipe(notify({message:"js task ok"})); //提示
});
以上是关于Web前端构建工具---Gulp的主要内容，如果未能解决你的问题，请参考以下文章