gulp模块简介：
一、简单的下载、安装：
（1）全局安装 ：
(cnpm) npm install gulp -g;
（2）初始化项目：
(cnpm) npm init 或 (cnpm) npm init -y （全部为yes状态）
（3）合并文件插件：
(cnpm) npm install gulp-concat --save-dev
（4）本地安装gulp：
(cnpm) npm install gulp --save-dev
（5）gulp语法检测：
(cnpm) npm install jshint gulp-jshint --save-dev
（6）gulp压缩js文件：
(cnpm) npm install gulp-uglify --save-dev
（7）gulp压缩css文件：
(cnpm) npm install gulp-minify --save-dev
（8）gulp sass 插件：
(cnpm) npm install gulp-ruby-sass --save-dev
（9）gulp服务器：
(cnpm) npm install gulp-webserver --save-dev
（10）gulp重命名：
(cnpm) npm install gulp-rename --save-dev
二、模块引入以及简单使用：
（1） 压缩 重命名：
var gulp = require(‘gulp’); // gulp模块生成
var minify = require('gulp-minify-css') // 压缩文件模块
var rename= require('gulp-rename') // 重命名模块
gulp.task('minifyTask' ,function(){ // 发布任务 名称为minify
gulp.src ('./a/*.css') // *找到所有的css文件
.pipe(minify()) // 压缩文件
.pipe(rename,function(path){ // 重命名函数
path.basename += '.min' //生成压缩后的文件名称
})
.pipe(gulp.dest('./b')) //生成文件
})
gulp.watch('./a.index.css',['copy']) //监听文件
（2）合并文件：
var gulp = require(‘gulp’); // gulp模块生成
var minify = require('gulp-minify-css') // 压缩文件模块
var concat= require('gulp-concat') // 合并模块
gulp.task('concatTask',function(){
gulp.src ('./a/*.css') // *找到所有的css文件
.pipe(['a.css','b.css']) // 要合并的文件 a.css b.css
.pipe(concat('ab.css')) // 合并成 ab.css
.pipe(minify()) // 压缩文件
.pipe(gulp.dest('./dist/css')) // 生成文件到dist/css中
})
（3）服务器 web
var gulp = require(‘gulp’); // gulp模块生成
var webserver = require('gulp-webserver') // 服务器模块
gulp.task('reverse',function(){
gulp.src ('./dist') // 服务器目录
.pipe(webserver{
port:8080, // 运行服务器
livereload:true, // 启动liveReload
open:true, // 启动后自动打开网页
host:'localhost' // 本地服务器
})
})
（4） sass 配置：
var gulp = require(‘gulp’); // gulp模块生成
var sass= require('gulp-ruby-sass') // sass模块
gulp.task('sassTack',function(){
gulp.src ('./src/sass/css/*.css') // 所有sass文件
.on('error',sass.logErroe) // 错误提示
.pipe(gulp.dest('./dist')) // 正确生成文件
}
（5）监听sass：
gulp.task('sasswatch',function(){
gulp.watch(['./src/assets/css/**/*.scss','sassTack']) // 可以是数组 执行多个监听
})
（6）默认加载：
gulp.task('default',[ 'sassTack','sasswatch','bil-bundel' ], // 先加载数组，后执行默认加载
functon(){
})
（7）合并第三方文件：（多个文件）
gulp.task('bil-bundel',function(){
var files = [ '文件1地址'，‘文件2地址’.... ] // 可以多个文件
return gulp.src(files) // 目录文件
.pipe(concat(‘bil-bundel.js’)) // 合并文件
.pipe(uglify(lib-bundel.min.js)) // 压缩文件
.pipe(gulp.dest('./dist')) // 生成文件
})
（8） 合并自己的 js 文件：（多个）
gulp.task('jsTack',function(){
.gulp.src('./src/**/*.js') // 目录文件
.pipe(concat(app.js)) // 合并文件
.pipe(gulp.dest('./dist')) // 生成文件
})
（9）打包文件：
gulp.task('copyhtml',function(){
var file = [ './index', // 要打包的文件，可多个
'./src/**/*.html', // 所有的HTML文件
'!./src/assets/**/*.html' ] // 去除空的文件
gulp.src(file) // 目录文件
.pipe(gulp.dest('./dist')) // 打包后的文件
})
（10） html缓存
gulp.task('revHtml', function () {
var files = ['./**/*.html', '!./dist/**', '!./html/**', '!./node_modules/**', '!./h5-wap/**', '!./index.html' ]
return gulp.src(files)
.pipe(rev())
.pipe(gulp.dest('./dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/html'))
})
（11）scc缓存
gulp.task('revCss', function () {
var files = ['./css/app.css'];
return gulp.src(files)
.pipe(rev())
.pipe(gulp.dest('./dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'))
})
网友评论