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中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
使用js画图之饼图
Jan 12 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 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
第十四节 命名空间 [14]
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python交互模式基础知识点学习
2020/06/18 Python
python爬虫用mongodb的理由
2020/07/28 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
数控专业个人求职信范例
2013/11/29 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
大国崛起英国观后感
2015/06/02 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
vue router 动态路由清除方式
2022/05/25 Vue.js