构建前端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保存一下，这样就能看到浏览器中也跟着更改