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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
浅谈js中变量初始化
Feb 03 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
来自qq的javascript面试题
2010/07/24 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Python封装原理与实现方法详解
2018/08/28 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python实现多进程通信实例分析
2019/09/01 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
如何设置Java的运行环境
2013/04/05 面试题
小学生班会演讲稿
2014/01/09 职场文书
女方回门宴答谢词
2014/01/14 职场文书
小学教师评语大全
2014/04/23 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2015年护士节慰问信
2015/03/23 职场文书
《绝招》教学反思
2016/02/20 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏