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 mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
js 异步处理进度条
Apr 01 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 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
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
小程序实现投票进度条
2019/11/20 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python远程连接服务器MySQL数据库
2018/07/02 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Django在Model保存前记录日志实例
2020/05/14 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
留学推荐信怎么写
2014/01/25 职场文书
初三学习计划书范文
2014/04/30 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
班主任寄语2015
2015/02/26 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang