gulp实现的多浏览器同步刷新工具

  在项目根目录中,创建一个gulpfile.js的文件,其作用是命令行中执行 gulp 任务名   时,会执行gulpfile.js中的一个同名任务。

 1 var gulp = require('gulp');
 2 var less = require('gulp-less');  //less转化为css
 3 var cssnano = require('gulp-cssnano');  //css压缩
 4 var browserSync = require('browser-sync').create(); //多浏览器同步
 5 var htmlmin = require('gulp-htmlmin');  //压缩html
 6 var concat = require('gulp-concat');    //合并不同的js文件
 7 var uglify = require('gulp-uglify');    //js压缩混淆
 8 
 9 
10 gulp.task('copy',function(){
11     gulp.src('src/index.html')
12     .pipe(gulp.dest('dist'))
13 });
14 
15 //刷新css
16 gulp.task('style',function(){
17     gulp.src('src/styles/*.less')
18     .pipe(less())
19     .pipe(cssnano())
20     .pipe(gulp.dest('dist/css/'))
21     .pipe(browserSync.reload({
22                  stream:true
23            }));
24 });
25 
26 //html去除多余空格
27 gulp.task('minify',function(){
28            gulp.src('src/*.html')
29            .pipe(htmlmin({collapseWhitespace:true}))
30            .pipe(gulp.dest('dist'))
31            .pipe(browserSync.reload({
32                  stream:true
33            }));
34 });
35 //js合并 压缩混淆
36 gulp.task('script',function(){
37     gulp.src('src/scripts/*.js')
38     .pipe(concat('all.js'))
39     .pipe(uglify())
40     .pipe(gulp.dest('dist/scripts'))
41     .pipe(browserSync.reload({
42         stream:true     //浏览器重新载入
43     }));
44 });
45 
46 //复制照片
47 gulp.task('image',function(){
48     gulp.src('src/imgs/*.*')
49       .pipe(gulp.dest('dist/imgs'))
50       .pipe(browserSync.reload({
51             stream:true
52       }));
53 });
54 
55 //多浏览器同步刷新的主要部分,启动服务后,src中的文件有变动,就会触发watch,从而执行相应的任务。
56 gulp.task('serve',function(){
57     browserSync.init({
58         server:{
59             baseDir : 'dist'
60         }
61     },function(err,bs){
62         console.log(bs.options.getIn(['urls','local']));
63     });
64     gulp.watch('src/styles/*.less',['style']);
65     gulp.watch('src/*.html',['minify']);
66     gulp.watch('src/scripts/*.js',['script']);
67     gulp.watch('src/imgs/*.*',['image']);
68 });

 

转载于:https://www.cnblogs.com/sujianfeng/p/8684234.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
### 回答1: Gulp是一种前端自动化工具,它可以帮助前端开发人员自动完成一些重复性工作,例如压缩CSS和JavaScript文件、自动刷新浏览器、合并文件等。 使用Gulp需要先安装Node.js和npm,然后使用npm安装Gulp。安装完成后,可以在项目的根目录下创建一个名为gulpfile.js的文件,该文件中定义了Gulp要执行的任务和任务的具体操作。 在gulpfile.js中,可以使用Gulp提供的API来定义任务。例如,可以使用gulp.task()方法定义一个任务,该方法接受两个参数:任务的名称和任务要执行的操作。可以使用gulp.src()方法指定要处理的文件,然后使用各种Gulp插件来执行各种操作,例如gulp-concat用于合并文件,gulp-uglify用于压缩JavaScript文件等。 最后,可以使用gulp.dest()方法将处理后的文件保存到指定目录。定义好任务后,可以在终端中使用gulp命令来执行任务,Gulp会自动执行任务并输出相关日志信息。 ### 回答2: Gulp是一个前端自动化工具,它通过编写简洁、易于理解的代码来帮助开发者自动化前端开发中的各种任务。 首先,Gulp使用简单且灵活。它使用流的概念,让开发者能够通过将任务连接在一起构建整个开发流程。开发者可以定义各种任务,如压缩文件、合并文件、编译代码等等,然后通过管道将这些任务链接在一起。这种方式使得构建前端项目变得非常容易,同时也让开发者能够根据自己的需求定制任务流程。 其次,Gulp有大量的插件可供选择。Gulp的插件系统非常强大,社区中有数以千计的插件可用。这些插件可以帮助开发者解决各种问题,如自动添加浏览器前缀、压缩文件、优化图片等等。开发者可以根据自己的需求选择合适的插件使用,从而提高工作效率。 另外,Gulp还具有良好的生态系统。无论是官方文档还是社区文档,都非常详细且易于理解。开发者可以很容易地找到所需的信息和教程,学习如何使用Gulp来优化自己的工作流程。 总的来说,Gulp是一个功能强大且易于使用的前端自动化工具。它能够帮助开发者提高工作效率,简化开发流程,同时也具有丰富的插件和优秀的生态系统。无论是小型项目还是大型项目,Gulp都是一个非常好的选择。 ### 回答3: Gulp是一个前端自动化工具,用于简化开发流程和提高工作效率。它基于流(stream)的概念,可以自动化处理和优化前端工作中的许多重复任务。 首先,通过在项目中配置gulpfile.js文件,可以定义各种任务(task)和相应的操作。可以使用Gulp来执行各种编译、压缩、合并、重命名、清理等操作,例如压缩CSS和JavaScript文件、编译Sass或Less、优化图像等等。这些任务可以按照开发者的需求进行自定义配置,满足不同项目的要求。 Gulp的使用也非常简单,只需要通过命令行运行gulp命令并指定要执行的任务即可。当有文件变动时,Gulp可以自动监听文件的变化并重新执行相应的任务,实时更新项目的输出。 此外,Gulp还支持插件生态系统,拥有大量的插件可供开发者选择使用。这些插件可以用于执行各种任务,例如自动生成CSS前缀、合并相同类型的文件、启动本地开发服务器等等。 总的来说,Gulp通过简化和自动化前端开发流程,大大提高了开发效率。它的简单易用和丰富的插件生态系统使得开发者能够根据项目需求快速搭建和优化前端工作流程。使用Gulp可以减少重复劳动,提高代码质量和开发效率,因此成为前端开发中不可或缺的工具之一。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值