前端自动化构建工具-gulp

偶然的一个机会，结实了gulp.js,在前端方面我们总是不可避免的调试页面，进行浏览器的刷新，使得前端开发者的任务更加繁重。为此gulp的出现就解放了双手。。终于可以放弃F5辣 哈哈。。

首先来看下gulp的安装

在gulp安装之前，必须先要有node的环境，因为gulp.js是基于node.js的。

所以先来安装node (如果你已经有node环境了就可以跳过此布)

node安装

  Node.js安装包及源码下载地址为https://nodejs.org/en/download/ node安装教程很多，此处不详述

 安装完成之后

 在命令行输入

node -v

查看安装版本

npm -v

查看npm 版本

gulp安装

 有了npm之后就可以执行

npm install gulp -g

就可以自如的使用gulp了

接下来看下gulp的应用

  创建一个项目

1.监听服务器文件

gulp.task('serve',(cb)=>{
if(!args.watch) return cb();
var server = liveserver.new(['--harmony','server/bin/www']);
server.start();
gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function (file) {
server.notify.apply(server,[file]);
})
//监听需要重启的文件
gulp.watch(['server/routes/**/*.js','server/app.js'],function () {
server.start.bind(server)()
});
})

此处需要引入一些包
import gulp from 'gulp';
import gulpif from 'gulp-if';
import liveserver from 'gulp-live-server';

2.监听css文件

gulp.task('css',()=>{
return gulp.src('app/**/*.css')
.pipe(gulp.dest('server/public'))
.pipe(gulpif(args.watch,livereload()))
})
此处需要引入一些包
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';

3.监听浏览器

import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util';
import args from './util/args';

gulp.task('browser',(cb)=>{
if(!args.watch) return cb();

gulp.watch('app/**/*.js',['scripts']);
gulp.watch('app/**/*.ejs',['pages']);
gulp.watch('app/**/*.css',['css']);
});

4.监听js

//引入一些包
import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';  //文件拼接
import webpack from 'webpack';      //打包
import gulpWebpack from 'webpack-stream';
import named from 'vinyl-named';        //重命名
import livereload from 'gulp-livereload';       //自动刷新  热更新
import plumber from 'gulp-plumber'; //处理文件信息流
import rename from 'gulp-rename';       //重命名
import uglify from 'gulp-uglify';       //压缩js css
import {log,colors} from 'gulp-util';       //命令行输出
import args from './util/args';         //对命令行参数进行解析

//创建一个任务
gulp.task('scripts',()=>{
//打开
return gulp.src(['app/js/index.js'])
//处理错误
.pipe(plumber({
errorHandle:function () {

}
}))
.pipe(named())
.pipe(gulpWebpack({
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader'
}]
}
}),null,(err,stats)=>{
log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
chunks:false
}))
})
//指定路径
.pipe(gulp.dest('server/public/js'))
//重命名
.pipe(rename({
basename:'cp',
extname:'.min.js'
}))
//压缩
.pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
.pipe(gulp.dest('serv
4000
er/public/js'))
.pipe(gulpif(args.watch,livereload()))

})

当然还有许多监听，此处不一一例举，但是思想则是相通的。

对于以上的监听，有必要说明一下，在安装包时 均使用

npm install *** --save-dev

在安装过程中可通过package.json查看变化。

拓展

当然gulp的应用远不止这些，在以下方面，gulp也是很厉害的

编译LESS

在LESS中加入自动前缀

在LESS中加入代码压缩

为链接文件追加版本号

文件合并

大家如果有兴趣也可以看看这里

结语

 gulp的应用给了我们很大的方便，这里是gulp的中文网站https://www.gulpjs.com.cn

 大家有兴趣的可以看下这个项目https://github.com/liulian0519/ES6-ticket

相信你对gulp会有更加深入的理解持续更新中，欢迎star