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 ...
随机推荐
- Oracle使用——Oracle表字段的增加、删除、修改和重命名
增加字段 语法 alter table tablename add (column datatype [default value][null/not null]); 说明:alter table 表 ...
- GIL锁更加深刻理解
参考链接:http://www.cnblogs.com/ajaxa/p/9111884.html
- install jqdatasdk
install jqdatasdk pip3 install jqdatasdk ... 54% |█████████████████ | 3.2MB 84kB/s eta 0:0 54% |████ ...
- MUI - 解决动态列表页图片懒加载再次加载不成功的bug
首先描述一下功能 实现列表页动态加载 通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现. http://www.cnblogs.com/philly ...
- SQL语法之DDL和DML
SQL语法之DDL和DML DDL数据库定义语言 create 创建 alter 修改 drop 删除 drop和delete的区别 truncate DML 数据操作语言 insert ...
- Ubuntu修改root密码,ssh 允许root用户登录
1,切换为root用户 2,passwd root(or others) 3,输两次密码 4,重启. ssh允许root用户登录: 1,vim /etc/ssh/sshd_config 2,修改Per ...
- PostgreSQL重新读取pg_hba.conf文件
PostgreSQL 配置文件之pg_hba.conf 该文件用于控制访问安全性,管理客户端对于PostgreSQL服务器的访问权限,内容包括:允许哪些用户连接到哪个数据库,允许哪些IP或者哪个网段 ...
- 在WPF中使用谷歌地图和高德地图
原文:在WPF中使用谷歌地图和高德地图 在桌面软件开发中可能会遇到这样的需求:显示地图. 常用的地图API有Google Map和高德地图.二者都提供了各种平台的API. 为了方便集成,本文使用Jav ...
- css浮动规则
1.浮动元素会从文档正常流中删除,但它仍会影响布局 2.浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示3.一旦元素具有了浮动属性,它便成为了一个块级元素. ...
- webpack详述
一.利用package.json执行打包任务 首先使用npm init生成package.json文件:然后配置scripts如下: "scripts": { "buil ...