Gulp Demo
安装gulp
npm install gulp -g #全局安装
查看是否安装成功
gulp -v #查看版本号
初始化
npm init #自动配置package.json
产生项目依赖(本地安装gulp插件）
npm install gulp --save-dev #作为项目依赖(本地安装gulp插件）
#或者：
npm install gulp -D
在项目文件夹下，新建build文件夹images文件夹，src文件夹，index.html 新建gulpfile.js
mkdir images #mkdir用于建文件夹
touch index.html #touch用于创建html/js/css
基本结构如下：
下面是我自己写的测试：
在 common.scss里面：
$baseColor:red;
在 app.scss里面：
@charset 'utf-8';
@import "./common.scss";
body{
background: $baseColor;
}
在index.html里面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/build/prd/styles/app.css"/>
</head>
<body>
hello Gulp!!!
<script type="text/javascript" src="/build/prd/scripts/app.js"></script>
</body>
</html>
common.js的代码：
module.exports = "hello,webPaccfkfsadgswww!!!!!!";
app.js的代码
var str = require('./common.js');
console.log(str);
####gulpfile.js
//引入gulp工具
var gulp = require('gulp');
//引入css预处理
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//引入js模块化工具 gulp-webpack,获取js文件名模块，js压缩模块：viny-named
var named = require('vinyl-named');
var webpack = require('gulp-webpack');
var uglify = require('gulp-uglify');
//引入 fs url模块
var fs = require('fs');
var url = require('url');
//引入rev revCollector
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
//引入gulp-sequence 模块
var sequence = require('gulp-sequence');
//引入gulp-webserver 模块
var webserver = require('gulp-webserver');
//启动webserver
gulp.task('webserver',function(){
gulp.src('./') //server读取的目录为当前目录
.pipe(webserver({
host:'localhost',
port:8090,
directoryListing:{
enable:true,
path:'./' //显示项目根路径，以fekit样式显示
},
livereload:true, //动态刷新
//mock数据
middleware:function(req,res,next){
var urlObj = url.parse(req.url,true);
switch(urlObj.pathname){
case '/api/orders':
res.setHeader('Content-Type','application/json');
fs.readFile('./mock/list.json',function(err,data){
res.end(data);
});
return;
case '/api/uesers':
res.setHeader('Content-Type','application/json');
rs.readFile('./mock/list.json',function(err,data){
res.end(data);
});
return;
}
next();
}
}))
});
//编译scss
var cssFiles = [
'./src/styles/app.scss'
];
gulp.task('scss',function(){
gulp.src(cssFiles)
.pipe(sass().on('error',sass.logError))
.pipe(minifyCss())
.pipe(gulp.dest('./build/prd/syles'));
});
//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'))
})
//版本号控制
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())
.pipe(gulp.dest('./build/ver/styles/'));
gulp.src(jsDistFiles)
.pipe(rev())
.pipe(gulp.dest('./build/prd/scripts/'))
.pipe(rev.manifest())
.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',sequence('copy-index',['ver','html']));//中括号是并行，否则为串行
//拷贝index.html到build文件夹
gulp.task('copy-index',function(){
gulp.src('./index.html')
.pipe(gulp.dest('./build'));
});
//拷贝images到build文件夹
gulp.task('copy-images',function(){
gulp.src('./images/**/*')
.pipe(gulp.dest('./build/images/'));
});
//侦测文件变化 执行相应任务
gulp.task('watch',function(){
gulp.watch('./index.html',['copy-index']);
gulp.watch('./images/*.*',['copy-images']);
gulp.watch('./src/styles/*.{scss,css}',['scss','min']);
gulp.watch('./src/scripts/*.js',['packjs'],'min');
});
//配置default 执行任务队列
//***default是按任务列表的顺序执行的
//gulp.task('default',['copy=index','copy-images','scss','webserver','packjs'],function(){
gulp.task('default',['watch','webserver'],function(){
console.log('任务队列执行完毕！！！')
})
安装：
$ cnpm install gulp-rev gulp-rev-collector -D
将css和js 打包：
gulp ver
打包index.html
gulp min
下载gulp-sequence模块
cnpm install gulp-sequence -D