当前位置:Gxlcms > html代码 > gulp实用配置的介绍与使用

gulp实用配置的介绍与使用

时间:2021-07-01 10:21:17 帮助过:22人阅读

简介:

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

这份配置我把它称作demo测试配置,因为在我工作的时候,经常需要快速出效果或者实现某些功能,你没有时间去自己实现,那么就需要找一些现有的例子或者插件。

不过这些demo或者插件很多时候需要在移动端查看或者启动一个服务器,所以这份配置的任务主要就是启动一个本地服务器,可以在移动端和PC端都同时查看,另外在修改代码的时候还能自动刷新,不用每次都切换应用刷新,特别是移动端,可以省去很多麻烦。

详细代码如下:

gulpfile.js:

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();// 启动 browserSync 服务,自己启动server,并且为浏览器实时刷新提供服务gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'},
    files: './demo/**/*',
    browser: ["chrome"]
  })
})// 默认任务,在命令行输入`gulp`来启动任务gulp.task('default', gulp.parallel('browserSync'))

package.json:

{  "name": "gulp-demo",  "version": "1.0.0",  "description": "",  "main": "index.js?1.1.11",  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"
  },  "author": "",  "license": "ISC",  "devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0"
  }
}

文件夹结构:

XX—

  |— demo

  |— gulpfile.js

|— package.json

这份配置里只用到了一个插件 browserSync ,这个插件会启动一个localhost服务器,可以自动刷新,并且移动端和PC端同步。

browserSync是一个很强大的插件,这里有一份关于它的中文文档,简单易懂,需要的可以自己查看。另外这里有一个小技巧就是,我们可以直接通过该插件的配置选项去监听文件修改,而不需要使用gulp的watch功能,更加简单。

以上就是gulp实用配置的介绍与使用的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行