gulp构建工具主要说 gulp-livereload的插件

最新推荐文章于 2025-08-08 17:07:36 发布

转载最新推荐文章于 2025-08-08 17:07:36 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/donglegend/articles/4670120.html

文章标签：

#javascript #前端 #测试 #ViewUI

本文介绍Gulp构建系统的使用方法，包括安装配置、压缩JavaScript文件等常见任务，并讲解如何利用Gulp实现浏览器自动刷新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。通过本文，我们将知道如何使用Gulp来改变开发流程，从而使开发更加快速高效。

What Is Gulp?

Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件（当然这些只是一小部分例子）。

Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如，有些插件可以用来执行JSHint、编译CoffeeScript，执行Mocha测试，甚至更新版本号。

对比其他构建工具，比如Grunt，以及最近流行的Broccoli，我相信Gulp会更胜一筹（请看后面的”Why Gulp?”部分），同时我汇总了一个使用Javascript编写的构建工具清单，可供大家参考。

Gulp是一个可以在GitHub上找到的开源项目。

Installing Gulp

安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：

npm install -g gulp

然后，在项目里面安装Gulp：

npm install --save-dev gulp

Using Gulp

现在我们创建一个Gulp任务来压缩JavaScript文件。首先创建一个名为gulpfile.js的文件，这是定义Gulp任务的地方，它可以通过gulp命令来运行，接着把下面的代码放到gulpfile.js文件里面。

var gulp = require('gulp'),

　　uglify = require('gulp-uglify');

gulp.task('minify', function () {

　　gulp.src('js/app.js')

　　　　.pipe(uglify())

　　　　.pipe(gulp.dest('build'))

});

然后在npm里面运行npm install -–save-dev gulp-uglify来安装gulp-uglify，最后通过运行gulp minify来执行任务。假设js目录下有个app.js文件，那么一个新的app.js将被创建在编译目录下，它包含了js/app.js的压缩内容。想一想，到底发生了什么？

我们只在gulpfile.js里做了一点事情。首先，我们加载gulp和gulp-uglify模块：

var gulp = require('gulp'), uglify = require('gulp-uglify');

然后，我们定义了一个叫minify的任务，它执行时会调用函数，这个函数会作为第二个参数：

gulp.task('minify', function () { });

最后，也是难点所在，我们需要定义任务应该做什么：

gulp.src('js/app.js') .pipe(uglify()) .pipe(gulp.dest('build'))

如果你对数据流非常熟悉（其实大多数前端开发人员并不熟悉），上面所提供的代码对你来说就没有太大意义了。

浏览器的自动刷新

今天主要说这个，网上有很多这个资料，技术就是用gulp-livereload插件，但是安装好后，却发现并没有什么卵用

这是因为如果想用这个东西需要一个名为LiveReload的chrome浏览器扩展程序，可以自行百度下载

当然还有更好的一个办法可以给html文件加上代码

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>    来源
然后就可以很开心的  使用 浏览器自动刷新功能了，当然要自行 用  watch 去监听文件的变化

转载于:https://www.cnblogs.com/donglegend/articles/4670120.html