Introduction and use of gulp practical configuration

Introduction:

gulp is a tool for building code in the front-end development process. It is a tool for building automation projects; it can not only optimize website resources, but also Many repetitive tasks in Python can be completed automatically using the right tools; using her, we can not only happily write code, but also greatly improve our work efficiency.

gulp is an automatic task runner based on Nodejs. She can automatically complete the testing, inspection, merging, compression, formatting and browsing of javascript/coffee/sass/less/html/image/css and other files. The server automatically refreshes, generates deployment files, and monitors files to repeat the specified steps after changes. In terms of implementation, she draws on the pipe idea of ​​the Unix operating system. The output of the previous level directly becomes the input of the next level, making the operation very simple. Through this article, we will learn how to use Gulp to change the development process, making development faster and more efficient.

gulp is very similar to grunt, but compared to grunt's frequent IO operations, gulp's stream operations can complete the build work faster and more conveniently.

I call this configuration the demo test configuration, because when I work, I often need to quickly produce effects or implement certain functions. If you don’t have time to implement it yourself, then you need to find some existing examples or plugins.

However, these demos or plug-ins often need to be viewed on the mobile terminal or start a server, so the main task of this configuration is to start a local server, which can be viewed on both the mobile terminal and the PC terminal at the same time. In addition, it is modified It can also be automatically refreshed when coding, so there is no need to switch applications to refresh every time. Especially on the mobile side, this can save a lot of trouble.

The detailed code is as follows:

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"
  }
}

Folder structure:

XX—

|— demo

|— gulpfile.js

|— package.json

Only one plug-in is used in this configuration browserSync . This plug-in will start a localhost server, which can automatically refresh and synchronize the mobile and PC terminals.

browserSync is a very powerful plug-in. Here is a Chinese document about it. It is simple and easy to understand. You can check it yourself if you need it. In addition, a little trick here is that we can monitor file modifications directly through the plug-in's configuration options without using gulp's watch function, which is simpler.

The above is the detailed content of Introduction and use of gulp practical configuration. For more information, please follow other related articles on the PHP Chinese website!