| gulp, 前端工程化

gulp实现前端工程化

Gulp就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点，Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。

gulp前端工程化常用功能

  1. sass/less编译
  2. 开启一个webserver
  3. css/js/图片压缩
  4. js模块化
  5. mock数据
  6. 包管理
  7. 版本号控制

    安装gulp

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    安装gulp 全局安装cnpm i gulp -g 
    npm init 
    cnpm i gulp -save-dev 本地安装 （放到开发依赖里面）可以简写成cnpm i gulp -D
    创建配置文件 touch gulpfile.js
    创建index.html 
    创建build文件夹 (mkdir build)
    创建src文件夹 (mkdir src) 
     在gulpfile.js里面写
    	//引入gulp工具
    	var gulp =require('gulp')
    	//拷贝index.html 到build文件夹
    	gulp.task('copy-index(任务名随便起)',function(){
    	//回调函数
    	gulp.src('./index.html')   //找到文件
    		. pipe(gulp.dest('./build') //输出到目标文件夹);

    	});

执行gulp copy-index (任务名)

1
2
3
4
5
//拷贝images到build
gulp.task('copy-images',function(){
	gulp.src('./images/**/*')         //*.*  **/*递归拷贝 *.{} 
	     .pipe(gulp.dest('./build/images/'))
	})

执行gulp copy-images

1
2
3
4
//配置default 任务,执行任务队列  有顺序
gulp.task('default',['copy-index','copy-images'],function(){  
	//回调
	})

执行gulp

启动webserver

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
npm i gulp-webserver -D 装webserver

	//引入gulp-webserver模块
	var webwerver =require('gulp-webserver'); 
	gulp.task('webserver',function(){
		//回调函数启动webserver
		gulp.src('./')
			.pipe(webwerver({
				host:'localhost' //配置域名
				,port:80 //端口号
				,directoryListing:{
					enable:true,
					path:'./'
				} // 显示目录
				,livereload:true //热加载，
				//mock数据
				middelware:function(req,res,next){
					var urlOjb = url.parse(req.url,true) //获得浏览器url
					switch(urlOjb.pathname){
						case '/api/orders':
						res.setHeader('Content-Type'.'application/json');
							fs.readFile('./mock/list.json',function(err,data){
								res.end(data);
							})
							reruen;
							case 'api/uses':
							reruen;

					}
					next();//执行
				}
				})) //任务引用
		})//这个名字随便起没有对应关系

执行 gulp

CSS预编译
cd src
mkdir styles
cd styles
touch app.scss
touch common.scss

/build/prd/styles/app.css

下载 npn i gulp-sass -D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//引入CSS预编译模块
var scss =require('gulp-sass')
//CSS预编译
var cssFiles=[
'./src/styles/app.scss' //只定义入口文件
];
gulp.task('scss',function(){
	gulp.src(cssFiles)
		.pipe(scss().on('error',scss.logError))
		.pipe(gulp.dest('./build/prd/styles/'))
		//压缩
		.pipe(minifyCSS())
		.pipe(gulp.dest('./build/prd/styles/'))
})

执行 gulp scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 下载 npn i gulp-minify-css -D
 	//引入压缩模块
 	var minifyCSS =require('gulp-minify-css');
 	.pipe(minifyCSS())
 	.pipe(gulp.dest('./build/prd/styles/'))


//侦测文件变化,执行相应任务
	gulp.task('watch',function(){
		gulp.watch('./index.html',['copy-index']); 
		gulp.watch('./src/styles/*.{scss,css}',['scss','min']); 
		gulp.watch('./src/styles/*.{scss,css}',['scss','min']); 
	})

npm i vinyl-named //获得文件名 gulp-webpack  gulp-uglify -D//js压缩

//引入js模块化工具 gulp-webpack ,获取js名模块 vinyl-named, js压缩模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 	var named = require('vinyl-named');
 	var webpack = require('gulp-webpack');
 	var uglify = require('gulp-uglify');

 	//js模块化,合并,压缩
 	var jsFiles = [
	'./src/scripts/app.js'
 	]
	
	gulp.task('packjs',function(){
		gulp.src(jsFiles)
			.pipe(named())
			.pipe(webpack({
				output:{
					filename:'[name].js' 
				},
				module:{
					loaders:[
						{
							test:/\.js$/,
							loader:'imports?define=>false'
						}
					]
				}

					}))
					.pipe(uglify().on('error',function(err){
						console.log('\x07',err.lineNumber,err.message);
						return this.end();
						}))
					.pipe(gulp.dest('./build/prd/scripts'));
		})
npm i imports-loader -D

mock数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
	//引入fs url模块
	var fs = require('fs');
	var url =require('url');
	//控制版本号
	//引入rev revCollector 模块
	var rev =require('gulp-rev');
	var revCollector =require('gulp-rev-collector');

npm i gulp-rev gulp-rev-collector -D	
	//版本号控制
	var cssDistFiles =[
	'./build/prd/styles/app.css'
	]
	var jsDistFiles = [
	'./build/prd/scripts/app.js'
	]

gulp.task('ver',function(){
	gulp.src(cssDistFiles)
		.pipe(rev())
		.pipe(gulp.dest('./build/prd/styles/'))
		.pipe(rev.manifest())  //产生一个rev-mainfest.json
		.pipe(gulp.dest('./build/ver/styles/'))
	gulp.src(jsDistFiles)
		.pipe(rev())
		.pipe(gulp.dest('./build/prd/scripts/'))
		.pipe(rev.manifest())  //产生一个rev-mainfest.json
		.pipe(gulp.dest('./build/ver/scripts/'))
})

gulp.task('html',function(){
	gulp.src(['./build/ver/**/*','./build/*.html'])
		.pipe(revCollector())
		.pipe(gulp.dest('./build/'))


})
gulp.task('min',['copy-index',ver','html'])

//引入gulp-sequence模块 串行
npm i gulp-sequence -D
	var sequence = require('gulp-sequence');

	gulp.task('min',sequence('copy-index',ver','html')) 并行[] 串行()