构建前端gulp自动化-白红宇

构建前端gulp自动化

阅读量：6540 次

发布时间：2019-06-24

本文共 2334 字，大约阅读时间需要 7 分钟。

看了很多关于Gulp自动化的相关教程，很感谢大神们的教程，

因为担心自己会忘记啥的，所以就把自己搭建gulp自动化的过程记录下来~~~

gulp是依赖于Nodejs的，所以最好是有点nodejs的基础，

搭建gulp分几步呢？如下：

1.安装Nodejs

　　安装nodejs 我们可以直接去官网下载就好啦

　　https://nodejs.org/en/

　　我们选择第一个就好啦(我安装的是下面圈起来的这个版本)

安装好Node以后我们需要安装gulp

2.全局安装gulp

　　cnpm install gulp -g

　　这些安装好了以后，我们就准备开始为项目搭建gulp了

3.进入项目文件夹，下载gulp

　　npm install gulp

　　注意：在这里有一个问题，明明我们是在gulptest文件中下载的gulp 为什么node_modules文件夹会跑到外面去呢？？？

　　-------那是因为我们没有初始化没有生成package.json文件，所以我们应该生产package.json文件以后再下载gulp

　　npm init

npm install --save-dev gulp

　　这样我们就在项目文件夹中安装好gulp 接下来我们就开始写gulpfile.js

4. 建立gulpfile.js文件

　　就像gruntjs需要一个Gruntfile.js文件一样，gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。新建一个文件名为gulpfile.js的文件，然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是一个最简单

　　的gulpfile.js文件内容示例，它定义了一个默认的任务。

var gulp = require('gulp');gulp.task('default',function(){    console.log('hello world');});

　　此时我们的目录结构是这样子的：

　　├── gulpfile.js

　　├── node_modules

　　│ └── gulp

　　└── package.json

　　现在我们来运行一下gulp 看看返回的是什么

　　在这里输出了 hello world

　　说明这个简单的gulpfile文件是可行的

　　但是呢? 我们平时做项目需要的是搭建一个自动化，所以单单这样是不行的，那我们就继续往下

5.利用connect来搭建创建一个web服务

//引入gulp包和gulp-connect包 var gulp=require('gulp');var connect=require('gulp-connect');gulp.task('webserver', function() {    connect.server();});gulp.task('default', ['webserver']);

　　这里我们利用gulp-connect搭建了一个自动化，所以我们的node_modules必须含有gulp-connect的包，如果没有需要下载

　　在gulp中require引入的包，如果没有则需要自己手动下载 npm install 包名称

　　最后我们再gulp 就可以了

　　然后我们打开浏览器localhost:8080,即可浏览html文件

　　但是每次更改完以后还是要我们自己手动刷新，不过是相当于放到了一个环境中，能更贴切正式环境罢了，

　　有时候我们的本地和正式环境有一点差距，需要我们自己去把控避免了

6.web服务自动刷新

　　我们会发现上面搭建的自动化服务没有自动刷新，那应该怎么办呢？

//引入插件var gulp = require('gulp');var connect = require('gulp-connect');//创建watch任务去检测html文件,其定义了当html改动之后，去调用一个Gulp的Taskgulp.task('watch', function () {    gulp.watch(['./**/*.html'], ['html']);}); //使用connect启动一个Web服务器

gulp.task('connect',function(){
       connect.server({
           root:'',         port:8888,//更改端口名         livereload:true     }) })

gulp.task('html', function () {    gulp.src(['./*.html'],['./**/*.html'])        .pipe(connect.reload());}); //运行Gulp时，默认的Taskgulp.task('default', ['connect', 'watch']); 打开git 输入gulp j即可启动服务

　　然后我们来看一下目录结构