gulp+tp5配置
优化了文件过滤，更改文件只会重新生成修改的文件
项目目录构建：
在入口文件public下，创建html目录，作为前台静态资源目录
gulp.js文件
/*!
* gulp
* $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev
*/ var gulp = require('gulp'), // 必须先引入gulp插件
del = require('del'), // 文件删除
less = require('gulp-less'), // less 编译
sourcemaps = require('gulp-sourcemaps'), //确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev]
cached = require('gulp-cached'), // 缓存当前任务中的文件，只让已修改的文件通过管道
uglify = require('gulp-uglify'), // js 压缩
rename = require('gulp-rename'), // 重命名
// concat = require('gulp-concat'), // 合并文件
copy = require('gulp-contrib-copy'),//不编译的文件直接copy
notify = require('gulp-notify'), // 相当于 console.log()输出报错信息
filter = require('gulp-filter'), // 过滤筛选指定文件
jshint = require('gulp-jshint'), // js 语法校验
watch = require('gulp-watch'),//重新编译被修改的文件
// revMD5 = require('gulp-rev-append'), // 插入文件指纹（MD5）
// cssnano = require('gulp-cssnano'), // CSS 压缩
imagemin = require('gulp-imagemin'), // 图片优化
browserSync = require('browser-sync'), // 保存自动刷新
connect = require('gulp-connect'), //热刷新(本地服务器)
fileinclude = require('gulp-file-include'), // 可以 复制粘贴过来相同的代码
autoprefixer = require('gulp-autoprefixer'), // 添加 CSS 浏览器前缀
babel = require('gulp-babel'); // 编译es6
plumber = require('gulp-plumber'), //gulp-plumber插件来忽略less编译错误
watch = require('gulp-watch'),//重新编译被修改的文件通过管道
// GJSDuck = require('gulp-jsduck'),//js文档生成
// gjsduck = new GJSDuck(['--out', 'mydoc']),//js文档生成
runSequence = require('run-sequence'), //添加版本号
rev = require('gulp-rev'),//包括插入文件指纹等等
revCollector = require('gulp-rev-collector');//添加版本号
spritesmith=require('gulp.spritesmith');//生成雪碧图
//定义原代码的目录和编译压缩后的目录
var src = 'src',//源代码目录
dist = 'dist';//编译压缩后的目录
//es6编译
// less
gulp.task('less', function () {
return gulp.src(src+'/Public/css/**/*.less') // 传入 less目录
.pipe(plumber()) //忽略错误
// 才能找出哪些文件是被修改过的
.pipe(watch(src+'/Public/css/**/*.less', { ignoreInitial: false }))
// .pipe(cached('less')) // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存）
// .pipe(autoprefixer('last 6 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本
.pipe(less({
plugins: [autoprefixer({
browsers: ['> 1%', 'last 4 versions', 'Chrome>=38', 'Android >= 4.0', 'Firefox ESR', 'Firefox >= 36','iOS 7'],
cascade: false, //是否美化属性值 默认：true 像这样：
remove: false //是否去掉不必要的前缀 默认：true
})]
}))
.pipe(sourcemaps.init()) //资源地图创建
.pipe(sourcemaps.write()) //资源地图写入
.pipe(rename({
suffix: '.min'
})) // 对管道里的文件流添加 .min 的重命名
// .pipe(cssnano()) // 压缩 CSS目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本
.pipe(gulp.dest(dist+'/Public/css')) //输出压缩的css文件
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}}))
});
// css （拷贝 *.min.css，常规 CSS 则输出压缩与未压缩两个版本）
gulp.task('css', function () {
return gulp.src(src+'/Public/css/**/*.css')
.pipe(watch(src+'/Public/css/**/*.css', { ignoreInitial: false }))
.pipe(cached('css'))
// .pipe(gulp.dest(dist+'/Public/css')) // 把管道里的所有文件输出到 dist/css 目录
.pipe(filter(['**/*', '!**/*.min.css'])) // 筛选出管道中的非 *.min.css 文件
.pipe(autoprefixer({
browsers: ['> 1%', 'last 4 versions', 'Chrome>=38', 'Android >= 4.0', 'Firefox ESR', 'Firefox >= 36','iOS 7'],
cascade: false, //是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove: false //是否去掉不必要的前缀 默认：true
}))
.pipe(connect.reload()) //页面热刷新
// .pipe(gulp.dest(dist+'/Public/css')) // 把处理过的 css 输出到 dist/css 目录
.pipe(rename({
suffix: '.min'
}))
// .pipe(cssnano())
.pipe(gulp.dest(dist+'/Public/css'))//输出压缩的css
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}}))
});
//输出开发目录压缩的css文件
gulp.task('cssmin', function () {
return gulp.src(src+'/Public/css/**/*.min.css')
.pipe(watch(src+'/Public/css/**/*.min.css', { ignoreInitial: false }))
.pipe(cached('css'))
.pipe(gulp.dest(dist+'/Public/css'))//输出压缩的css
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}})) })
//生成雪碧图
gulp.task('spritesmith',function(){
return gulp.src(src+'/Public/images/icon/**/*.{jpg,jpeg,png,gif,ico}')
.pipe(spritesmith({
imgName:'images/sprite.png',//保存合并后的名称
cssName:'css/sprite.less',//保存合并后css样式的地址
padding:15,//合并时两个图片的间距
algorithm:'binary-tree',//注释1
//cssTemplate:'dest/css/handlebarsStr.css'//注释2
cssTemplate:function(data){ //如果是函数的话，这可以这样写
var arr=[];
width = data.spritesheet.px.width,
height = data.spritesheet.px.height,
url = data.spritesheet.image,
arr.push("@r:75rem;.icon{display:inline-block};")
data.sprites.forEach(function (sprite) {
arr.push(
".icon-"+sprite.name+
"{"+
// "background: url('"+url+"') "+
"background: url('../images/sprite.png?v="+Date.parse(new Date())+"')"+
"no-repeat "+
parseInt(sprite.px.offset_x)+"/@r "+parseInt(sprite.px.offset_y)+"/@r;"+
"background-size: "+ parseInt(width)+"/@r "+parseInt(height)+"/@r;"+
"width: "+parseInt(sprite.px.width)+"/@r;"+
"height: "+parseInt(sprite.px.height)+"/@r;"+
"}\n"
);
});
return arr.join("");
}
}))
.pipe(gulp.dest(src+'/Public'))
.pipe(notify({ message: 'csssprite完成' }))
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}}))
})
// styleReload （结合 watch 任务，无刷新CSS注入）
gulp.task('styleReload', ['less', 'css', 'image'], function () {
return gulp.src([dist+'/Public/css/**/*.css'])
.pipe(cached('style'))
.pipe(browserSync.reload({
stream: true
})); // 使用无刷新 browserSync 注入 CSS
}); // script （拷贝 *.min.js，常规 js 则输出压缩与未压缩两个版本）
gulp.task('script', function () {
return gulp.src([src+'/Public/js/**/*.js'])
.pipe(watch(src+'/Public/js/**/*.js', { ignoreInitial: false }))
.pipe(cached('script'))
// 筛选出管道中的非 *.min.js 文件非es6目录文件
.pipe(filter(['**/*', '!**/*.min.js','!**/es6/*.js']))
.pipe(jshint(require('./package').jshintConfig)) // 进行检查（设定导入文件 可以配置在package内）
.pipe(jshint.reporter('default')) // 对代码进行报错提示
.pipe(plumber()) //忽略错误
//es6语法js文件无法直接压缩
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify()) // 压缩js
.pipe(gulp.dest(dist+'/Public/js')) //输出压缩后的js文件
.pipe(notify({ message: 'JS压缩完成' }))
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}}))
});
//输出开发目录压缩的js文件
gulp.task('scriptmin', function () {
return gulp.src([src+'/Public/js/**/*.min.js'])
.pipe(watch(src+'/Public/js/**/*.min.js', { ignoreInitial: false }))
.pipe(cached('script'))
.pipe(gulp.dest(dist+'/Public/js')) //输出压缩后的js文件
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}}))
})
//处理es6语法压缩
gulp.task('es6', function () {
return gulp.src([src+'/Public/js/es6/**/*.js'])
.pipe(watch(src+'/Public/js/es6/**/*.js', { ignoreInitial: false }))
.pipe(cached('script'))
.pipe(filter(['**/*', '!**/*.min.js'])) // 筛选出管道中的非 *.min.js 文件
/**
* 从package.json专门加载配置避免查找开销
* 提示内容
* 启用有关未定义和未使用变量的警告
*/
.pipe(jshint(require('./package').jshintes6)) // 进行检查（设定导入文件 可以配置在package内）
.pipe(jshint.reporter('default')) // 对代码进行报错提示
// // .pipe(jshint('.jshintrc')) // 从指定文件进行检查
// // .pipe(jshint.reporter('default'))
// // .pipe(concat('main.js'))
// .pipe(connect.reload()) //页面热刷新
//es6转码
.pipe(babel({
presets: ['env']
}))
.pipe(plumber()) //忽略错误
//es6语法js文件无法直接压缩
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify()) // 压缩js
.pipe(gulp.dest(dist+'/Public/js')) //输出压缩后的js文件
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}}))
});
// image
gulp.task('image', function () {
return gulp.src(src+'/Public/images/**/*.{jpg,jpeg,png,gif,ico}')
.pipe(watch(src+'/Public/images/**/*.{jpg,jpeg,png,gif,ico}', { ignoreInitial: false }))
.pipe(cached('image'))
.pipe(filter(['**/*','!**/icon/*.png']))//除了icon文件夹全部解压出
.pipe(imagemin({
optimizationLevel: 3, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
// 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化
.pipe(connect.reload()) //页面热刷新
.pipe(gulp.dest(dist+'/Public/images'))
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}}))
}); // html 编译 html 文件并复制字体
gulp.task('html', function () {
return gulp.src([src+'/Home/**/*.html'])
.pipe(watch(src+'/Home/**/*.html', { ignoreInitial: false }))
.pipe(fileinclude()) // include html
.pipe(connect.reload()) //页面热刷新
.pipe(gulp.dest(dist+'/Home/'))/*输出html文件*/
.pipe(notify({
message: "生成文件: <%= file.relative %> @ <%= options.date %>",
templateOptions: {
date: new Date().toLocaleTimeString()
}}))
});
// //img生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revImg', function(){
return gulp.src(src+'/Public/images/**/*.png')
.pipe(filter(['**/*','!**/icon/*.png']))//除了icon文件夹全部解压出
.pipe(rev())
.pipe(gulp.dest(dist+'/Public/images'))
.pipe(rev.manifest())
.pipe(gulp.dest(dist+'/Public/images'));
});
// //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
return gulp.src(dist+'/Public/css/**/*.css')
.pipe(rev())
.pipe(gulp.dest(dist+'/Public/css'))//引用的文件添加版本号
.pipe(rev.manifest())
.pipe(gulp.dest(dist+'/Public/css'));//输出json文件索引
}); // //js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
return gulp.src([dist+'/Public/js/**/*.js'])
.pipe(filter(['**/*','!**/**/1.json']))//除了1.json
.pipe(rev())
.pipe(gulp.dest(dist+'/Public/js'))//引用的文件添加版本号
.pipe(rev.manifest())
.pipe(gulp.dest(dist+'/Public/js'));//输出json文件索引
}); //Html更换css、js文件版本
gulp.task('revHtml', function () {
return gulp.src([dist+'/**/*.json', dist+'/Home/**/*.html']) /*WEB-INF/Homes是本地html文件的路径，可自行配置*/
.pipe(filter(['**/*','!**/**/1.json']))//除了1.json
.pipe(revCollector())
.pipe(gulp.dest(dist+'/Home/')); /*Html更换css、js文件版本,WEB-INF/Homes也是和本地html文件的路径一致*/
});
//Html更换dev文件版本
gulp.task('dev', function (done) {
////需要说明的是，用gulp.run也可以实现以上所有任务的执行，
//只是gulp.run是最大限度的并行执行这些任务，
//而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
condition = false;
runSequence(
['revImg'],
['revCss'],
['revJs'],
['revHtml'],
done);
}); // clean 清空 生产 目录
gulp.task('clean', function () {
return del(dist+'/**/*');
}); // build，关连执行全部编译任务
gulp.task('build', ['less', 'css', 'script', 'image','html','scriptmin','cssmin','copy'], function () {
gulp.start('html');
}); // copy 其他不编译的文件直接copy
gulp.task('copy', function () {
return gulp.src(src+'/**/*.!(jpg|jpeg|png|gif|bmp|scss|less|js|html|tpl|css)')
.pipe(copy())
.pipe(gulp.dest(dist+'/'));
}); // default 默认任务，依赖清空dist目录和生成api文档
gulp.task('default', ['clean', 'doc'], function () {
return gulp.start('build');
}); //doc生成javascript api文档
gulp.task('doc', function () {
return gulp.src(src+'/Public/js/es6/*.js')
.pipe(gjsduck.doc());
});
// watch 开启本地服务器并监听
gulp.task('watch', ['less', 'css', 'script', 'image','html'], function () {
browserSync.init({
//静态服务器配置
// server: {
// baseDir: 'dist', // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器,设置服务器的根目录
// // index:'Home/Index/index' // 指定默认打开的文件
// },
// 代理服务器配置
port:8050, // 指定访问服务器的端口号
proxy: "http://jjbb3", // 设置本地服务器的地址
notify: true, // 刷新不弹出提示
});
// 监控 html 文件，有变动则执行 html 任务
gulp.watch(src+'/Home/**/*.html', ['html']).on('change',browserSync.reload);
// 监控 雪碧图 文件，有变动则执行CSS注入
gulp.watch(src+'/Public/css/**/sprite.less', ['less','styleReload']);
// 监控 less 文件，有变动则执行less注入
gulp.watch(src+'/Public/css/**/*.less', ['css','styleReload']);
// 监控 CSS 文件，有变动则执行CSS注入
gulp.watch(src+'/Public/css/**/*.css', ['styleReload']);
// 监控 js 文件，有变动则执行 script doc任务
gulp.watch(src+'/Public/js/**/*.js', ['script']);
// 监控图片文件，有变动则执行 image 任务
gulp.watch(src+'/Public/images/**/*', ['image']);
// 监听其他不编译的文件 有变化直接copy
gulp.watch(src+'/Public/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html)', ['copy']);
// 监控 dist 目录下除 css 目录以外的变动（如js，图片等），则自动刷新页面
gulp.watch([src+'/Public/**/*', src+'/Public/css/**/*']).on('change', browserSync.reload);
});
package.json文件
{
"name": "tpgulp",
"version": "1.0.0",
"description": "我的个人tp-gulp配置",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.23.6",
"cloneable-readable": "^1.1.2",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-babel": "^7.0.1",
"gulp-cached": "^1.1.1",
"gulp-connect": "^5.5.0",
"gulp-contrib-copy": "^0.1.3",
"gulp-cssnano": "^2.1.3",
"gulp-file-include": "^2.0.1",
"gulp-filter": "^5.1.0",
"gulp-imagemin": "^4.1.0",
"gulp-jsduck": "^1.0.0",
"gulp-jshint": "^2.1.0",
"gulp-less": "^4.0.0",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^8.1.1",
"gulp-rev-collector": "^1.3.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^5.0.1",
"gulp.spritesmith": "^6.9.0",
"jshint": "^2.9.5",
"less": "^3.0.1",
"modify-filename": "^1.1.0",
"rev-path": "^2.0.0",
"run-sequence": "^2.2.1"
},
"jshintes6": {
"undef": true,
"unused": true,
"predef": [],
"esversion": 6
},
"jshintConfig": {
"undef": true,
"notypeof": true,
"shadow": "inner",
"predef": [],
"unused": false,
"jquery": true,
"eqnull": true
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "WebZhouT",
"license": "ISC"
}
命令行运行指令
cnpm install --save-dev
gulp watch //热刷新
gulp build //压缩输出内容
gulp clean //清空目录下的dist文件
https://www.cnblogs.com/NB-JDzhou/p/10197003.htmlgulp+tp5配置的更多相关文章
- 基于流的自动化构建工具------gulp (简单配置)
项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...
- gulp+ThinkPHP配置
gulp+ThinkPHP配置 gulp+ThinkPHP配置 目录结构: html |-src 开发目录 |-Home 静态页面 |-Public 静态资源目录 |-dist 生产目录 |-Home ...
- gulp使用配置
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
- 前端构建工具：gulp的配置与使用
安装gulp 因为gulp是基于node的管理工具,所以要先安装nodejs安装nodejsnodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.or ...
- 使用gulp自动化配置环境变量
使用gulp拷贝文件,可以完成开发api环境变量的配置,例如公司的线上环境有三个: 1.alpha线上测试环境 2.dev线上测试环境 3.test 本地测试环境 (4.production 正式系统 ...
- gulp实用配置（2）——中小项目
上一篇的gulp配置很简单,主要就是为了demo的查看和调试,这一篇则会相对详细一些,包括压缩合并打时间戳等. 在互联网环境比较好的城市,需要多人协作的,大一点的项目应该都用上了模块化(这里主要指co ...
- gulp实用配置（1）——demo
在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了. 最近一段时间不是太忙,所以就写了三份配 ...
- gulp+webpack配置
转自:https://www.jianshu.com/p/2549c793bb27 gulp gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开 ...
- lnmp环境的nginx的tp5配置
php7.1 server { listen 80; server_name www.tp5.com; access_log /home/wwwroot/access.log combined; er ...
随机推荐
- SSM-Spring-03：Spring中AOP的初窥和入门小案例
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- AOP:面向切面编程 AOP的主要作用:是为了程序员更好的关注"业务",专心"做 ...
- 分布式计算框架Gearman原理详解
什么是Gearman? Gearman提供了一个通用的应用程序框架,用于将工作转移到更适合于工作的其他机器或流程.它允许你并行工作,负载平衡处理,并在语言间调用函数.它可用于从高可用性网站到传输数据库 ...
- Linux共享库、静态库、动态库详解
1. 介绍 使用GNU的工具我们如何在Linux下创建自己的程序函数库?一个“程序函数库”简单的说就是一个文件包含了一些编译好的代码和数据,这些编译好的代码和数据可以在事后供其他的程序使用.程序函数库 ...
- 区分getchar(),getch(),getche()三个函数：
区分getchar(),getch(),getche()三个函数: 第一行是手动输入的,第二行是printf输出的. getch()和getche()这两个函数使用时要包含conio.h头文件: ge ...
- 你不知道的JavaScript--Item10 闭包（closure）
JavaScript 闭包究竟是什么? 用JavaScript一年多了,闭包总是让人二丈和尚摸不着头脑.陆陆续续接触了一些闭包的知识,也犯过几次因为不理解闭包导致的错误,一年多了资料也看了一些,但还是 ...
- Github管理自己的代码-远程篇
一.名词解释 Git Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版 ...
- Ordering犀利的比较器
Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering和JDK Comparator相比功能更强.它非常容易扩展,可以轻松构造复杂的comparator,然后用在 ...
- 【bzoj 3601】一个人的数论 （莫比乌斯反演+伯努利数）
题解: (吐槽:网上题解那个不严谨猜测真是没谁了……关键是还猜得辣么准……) 直接化简到求和那一段: $f_{d}(n)=\sum_{t|n}\mu(t)t^{d}\sum_{i=1}^{\frac{ ...
- bzoj4871 [Heoi2017]摧毁“树状图”
刷完了去年的省选题,发现自己dp已经凉凉了. 虽然暴力可以拿到80分的好成绩,但是正解的dp状态和转移还是没能想到,是时候补一波dp了 这道题我们肯定是要树形dp,存的肯定就是子树某种状态的最多的联通 ...
- bzoj 1098 poi2007 办公楼 bfs+链表
题意很好理解,求给出图反图的联通块个数. 考虑这样一个事情:一个联通块里的点,最多只会被遍历一次,再遍历时没有任何意义 所以用链表来存,每遍历到一个点就将该点删掉 #include<cstdio ...