gulp4.0基本配置,超简单!
最近复习了一下gulp,目前是4.0版本。
下图是基本目录结构,文件里面的内容可以随意添加,超详细简洁啊!
直接上代码(依赖未完全使用):
项目的所有依赖都可以安装,每个都有详细的注释。
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require("browser-sync").create(), //自动刷新
reload = browserSync.reload;
const filter = require('gulp-filter');
// gulp-filter 包, 以确保只有 *.css 文件响应 .reload - 这样一来,
// 您还是会得到CSS注入,而不是整个页面重载。
const useref = require('gulp-useref'); //合并JS
const uglify = require('gulp-uglify'); //js压缩
const minifyCSS = require('gulp-minify-css'); //压缩css var gulpIf = require('gulp-if'); var del = require('del'); var runSequence = require('run-sequence');//组织任务执行顺序,未使用 var rename = require('gulp-rename');//重命名 var watch=require('gulp-watch');//监视 var minifyHtml = require("gulp-minify-html");//压缩html var babel = require("gulp-babel");
// npm install --save-dev gulp-babel@7 babel-core babel-preset-env var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');//压缩图片文件
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 浏览器刷新
var cache = require('gulp-cache');//压缩图片可能会占用较长时间,使用 gulp-cache 插件可以减少重复压缩。
var RevAll = require("gulp-rev-all");//md5后缀 gulp.task('html',function(){//编译html
return gulp.src('app/*.html')
.pipe(gulp.dest('app/dist'))
.pipe(connect.reload());
}) gulp.task('css',function(){//编译scss
return gulp.src('app/scss/**/*.scss')
.pipe(sass())//编译scss
// .pipe(gulp.dest('app/css')) //当前对应css文件
.pipe(gulp.dest('app/dist/css')) //当前对应css文件
.pipe(connect.reload());//更新
}) gulp.task('js',function(){//编译ES6并且压缩
return gulp.src('app/js/**/*.js')
.pipe(jshint())//检查代码
.pipe(babel({//编译ES6
presets: ['es2015']
}))
.pipe(uglify())//压缩js
.pipe(gulp.dest('app/dist/js'))
.pipe(connect.reload());
}) gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('app/dist/fonts'))
}) gulp.task('images', function() {
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({//压缩图片文件
interlaced: true,
})))
.pipe(gulp.dest('dist/images'))
}); gulp.task('clean:app/dist', function() {//删除之前生成的文件
return del(['app/dist']);
}); gulp.task('clean:dist', function() {//异步清理除dist目录图片以外的文件
return del(['app/dist/**/*', '!dist/images', '!dist/images/**/*']);
}); gulp.task('minFs', function() {//压缩文件
return gulp.src('app/dist/*.html')
.pipe(useref())//合并js
.pipe(
gulpIf('*.js',uglify())//压缩js
)
.pipe(gulpIf('*.css', minifyCSS()))//压缩css
.pipe(RevAll.revision({//不被重命名
dontRenameFile:[/^\/favicon.ico$/g, ".html"]
}))
.pipe(gulp.dest('dist'));
}); gulp.task('connect:app',function(){
connect.server({
root:'app',//根目录
// ip:'192.168.11.62',//默认localhost:8080
livereload:true,//自动更新
port:9998//端口
})
}) gulp.task('connect:dist',function(cb){
connect.server({
root:'app',//根目录
// ip:'192.168.11.62',//默认localhost:8080
livereload:true,//自动更新
port:9999//端口
})
cb()//执行回调,表示这个异步任务已经完成,起通作用,这样会执行下个任务
}) gulp.task('watchs',function(){//监听变化执行任务
//当匹配任务变化才执行相应任务
gulp.watch('app/*.html',gulp.series('html'));
gulp.watch('app/scss/**/*.scss',gulp.series('css'));
gulp.watch('app/js/**/*.js',gulp.series('js'));
gulp.watch('app/fonts/**/*',gulp.series('fonts'));
gulp.watch('app/images/**/*',gulp.series('images'));
}) //gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行 //下面1和2分别运行 //1.自动监测文件变化并刷新浏览器 //初始生成app/dist目录
gulp.task('init',gulp.series('clean:app/dist',gulp.parallel('html','css','js','fonts','images'))); //启动任务connect:app服务,并监控变化
gulp.task('run',gulp.series('init','connect:app','watchs')); //2.生成打包文件
gulp.task('build',gulp.series('clean:dist',gulp.parallel('init'),'minFs')); //启动任务connect:dist服务,生成打包文件后,监控其变化
gulp.task('serve',gulp.series('connect:dist','build','clean:app/dist','watchs'));
gulp4.0基本配置,超简单!的更多相关文章
- 使用spring 4.0 + maven 构建超简单的web项目
一.需求 使用spring去管理web项目,是目前非常流行的一种思路,本文将介绍使用maven+spring 4.0.2 来构建一个简单的web项目. 二.实现 1.新建一个maven项目,如下图所示 ...
- ssh框架整合---- spring 4.0 + struts 2.3.16 + maven ss整合超简单实例
一 . 需求 学了这么久的ssh,一直都是别人整合好的框架去写代码,自己实际动手时才发现框架配置真是很坑爹,一不小心就踏错,真是纸上得来终觉浅! 本文将记录整合struts + spring的过程 , ...
- (超简单)VScode配置C/C++环境图文教程(Windows系统下)
(超简单)VScode配置C/C++环境图文教程(Windows系统下) 本文参考文章 Visual Studio Code (vscode) 配置 C / C++ 环境 下载VScode.下载Min ...
- mysql 5.7.29 在centos7.6下超简单的本地yum源安装与配置
目录 生成yum源元数据 从网易镜像站下载MySQL 5.7 的 bundle包 创建文件 mysql-local.repo 执行yum install命令 生成yum源元数据 createrepo ...
- 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
并发编程概述 前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...
- ASP.NET中一种超简单的Ajax解决方案
为什么是Ajax2? 因为之前有一个blqw.Ajax,并且已经在项目中投入使用了,但是没有这个方便,这个是后来才弄的,为了纪念第一版的blqw.Ajax,所以这个就2了... 话说看了评论才发现,原 ...
- mysql主从复制(超简单)
mysql主从复制(超简单) 怎么安装mysql数据库,这里不说了,只说它的主从复制,步骤如下: 1.主从服务器分别作以下操作: 1.1.版本一致 1.2.初始化表,并在后台启动mysql ...
- jsp学习---使用jsp和JavaBean实现超简单网页计算器
一.需求 如题,用jsp实现一个超简单的网页计算器. 二.实现 1.效果图 1)初始界面: 2)随便输入两个数进行相乘: 3)当除数为零时提示报错: 2.代码 Calculator.java pack ...
- (转)Springboot日志配置(超详细,推荐)
Spring Boot-日志配置(超详细) 更新日志: 20170810 更新通过 application.yml传递参数到 logback 中. Spring Boot-日志配置超详细 默认日志 L ...
随机推荐
- linux下播放器设计和开发
http://blog.csdn.net/henryjee/article/details/6737392 本文根据DawnLightPlayer的开发经验写成.DawnLithtPlayer是今天3 ...
- JavaSript中的正则表达式
正则表达式是对字符串操作的逻辑公式,表达了对字符串的一种过滤逻辑. 相对于.NET和Perl,JS对正则表达式的支持相当朴素,或者说JS的正则表达式是perl正则表达式的一个子集. 一.正则表达式引擎 ...
- Facebook POP动效库使用教程
编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地 ...
- SSM框架用JSON进行前后端数据传输
一个根据用户id查找用户信息的简单功能,使用JSON进行数据的传输 前端代码 这里用bootstrap做简单的样式美化,中间留了个div用来异步的显示查询结果,ajax进行前端的数据传输(class内 ...
- bzoj1412 狼和羊的故事
Description “狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向......” Orez听到这首歌,心想:狼和羊如此和谐,为什么不尝试羊狼合养呢?说干就干! O ...
- 2018-10-19-Roslyn-使用-Directory.Build.props-文件定义编译
title author date CreateTime categories Roslyn 使用 Directory.Build.props 文件定义编译 lindexi 2018-10-19 18 ...
- Python基础:10函数参数
局部命名空间为各个参数值创建了一个名字,一旦函数开始执行,就能访问这个名字了. 在函数调用时,有非关键字参数和关键字参数之分,非关键字参数必须位于关键字参数之前. 在函数定义时,严格的顺序是:位置参数 ...
- @总结 - 2@ 位运算卷积/子集卷积 —— FWT/FMT
目录 @0 - 参考资料@ @1 - 异或卷积概念及性质@ @2 - 快速沃尔什正变换(异或)@ @3 - 快速沃尔什逆变换(异或)@ @4 - 与卷积.或卷积@ @5 - 参考代码实现@ @6 - ...
- 报错No module named IPython的解决方法
没有按照 ipython 或者 ide 没有选择编译器
- 4 文件操作 支持图片 视频 mp3 文本等
#文件操作:send_file,支持图片 视频 mp3 文本等@app.route("/img")def img(): return send_file("1.jpg&q ...