JS中使用gulp实现压缩文件及浏览器热加载功能


Posted in Javascript onJuly 12, 2017

gulp类似于grunt,都是基于Node.js的前端构建工具。不过gulp压缩效率更高。

一.安装gulp

首先,你要安装过nodejs,如果没有安装过的同学请自行下载。  先再命令行里输入   npm install gulp -g   下载gulp

二.创建gulp项目

创建一个你需要项目文件夹,然后在根目录输入  npm init  (npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息。比如你用到的各种依赖)

三.使用npm install 安装各种依赖

例:

npm install browser-sync--save-dev

JS中使用gulp实现压缩文件及浏览器热加载功能

这里总共用到了这些依赖,请自行下载   具体各自都有什么用 后面会具体介绍。

四.编写gulpfile.js

首先,声明这些依赖

JS中使用gulp实现压缩文件及浏览器热加载功能

然后我们就要开始最重要的工作了,配置这些依赖

1.配置压缩css

 JS中使用gulp实现压缩文件及浏览器热加载功能

2.配置压缩js

JS中使用gulp实现压缩文件及浏览器热加载功能

3.配置压缩img

JS中使用gulp实现压缩文件及浏览器热加载功能

4.配置html,这里没有进行压缩,感觉没有压缩的必要 (纯属见仁见智)

JS中使用gulp实现压缩文件及浏览器热加载功能

5.配置清楚文件,因为每次打包都会生成新文件  所以在这之前要把之前的文件给清除掉

JS中使用gulp实现压缩文件及浏览器热加载功能

6.配置浏览器热加载

JS中使用gulp实现压缩文件及浏览器热加载功能

7.配置打包  

JS中使用gulp实现压缩文件及浏览器热加载功能

这里的runSequence是指能同时执行多个命令

8.设置gulp启动时执行哪些配置

JS中使用gulp实现压缩文件及浏览器热加载功能

最后放上全部代码 供大家参考

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var minifyCSS = require('gulp-minify-css');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
var minifyHtml= require("gulp-minify-html");
gulp.task('sass', function(){  //打包sass
 return gulp.src('app/scss/**/*.scss')
  .pipe(sass()) // Converts Sass to CSS with gulp-sass
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.reload({
   stream: true
  }))
});
gulp.task('js',function() {
  gulp.src('app/**/*.js')
  .pipe(uglify())//压缩
  .pipe(gulp.dest('dist'));
});
gulp.task('css', function () {
  gulp.src('app/css/*.css')
  .pipe(minifyCSS())
  .pipe(gulp.dest('dist/css'))
})
gulp.task('minify-html',function() {
   gulp.src('app/**/*.html')//要压缩的html文件
   .pipe(gulp.dest('dist'));
});
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', function(callback) {
 del('dist');
 return cache.clearAll(callback);
});
gulp.task('watch',['browserSync', 'sass'],function(){  //我们可以在watch任务之前告知Gulp,先把browserSync和Sass任务执行了再说。
 gulp.watch('app/scss/**/*.scss', ['sass']);
 gulp.watch('app/*.html', browserSync.reload);
 gulp.watch('app/js/**/*.js', browserSync.reload);
 // Other watchers
});
gulp.task('browserSync', function() { //浏览器热加载
 browserSync({
  server: {
   baseDir: 'app'
  },
 })
});
gulp.task('build', function (callback) {
 runSequence('clean',['minify-html','js','images','css'],callback)
});
gulp.task('default', function (callback) {
 runSequence(['sass','browserSync', 'watch'],
  callback
 )
});

以上所述是小编给大家介绍的JS中使用gulp实现压缩文件及浏览器热加载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 #Javascript
js 监控iframe URL的变化实例代码
Jul 12 #Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 #Javascript
基于zepto.js实现手机相册功能
Jul 11 #Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 #Javascript
详解Webpack DLL用法以及功能
Jul 11 #Javascript
You might like
论坛头像随机变换代码
2006/10/09 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
动态样式类封装JS代码
2009/09/02 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
vue 插件的方法代码详解
2019/06/06 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
Python selenium文件上传方法汇总
2020/11/19 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
PyQt5实现简易电子词典
2019/06/25 Python
django 控制页面跳转的例子
2019/08/06 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
python关闭占用端口方式
2019/12/17 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
python字典按照value排序方法
2020/12/28 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
小学生打架检讨书
2014/01/26 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
个人综合鉴定材料
2014/05/23 职场文书
医学生求职信
2014/07/01 职场文书
倡议书作文
2015/01/19 职场文书
九年级英语教学反思
2016/02/15 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL