构建前端gulp自动化

看了很多关于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的Task

gulp.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时，默认的Task

gulp.task('default', ['connect', 'watch']);

打开git 

输入gulp j即可启动服务

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

　　我们打开localhost:8080然后输入你要查看的文件或者文件夹中的某个文件即可

　　比如我要查看demo.html

　　我们在编译器中更改某个文件，那么更改完毕一定要ctrl+s保存一下，这样就能看到浏览器中也跟着更改

巴特西

构建前端gulp自动化

最新文章

热门文章