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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Practical tips for converting full-width English letters into half-width forms. In modern life, we often come into contact with English letters, and we often need to input English letters when using computers, mobile phones and other devices. However, sometimes we encounter full-width English letters, and we need to use the half-width form. So, how to convert full-width English letters to half-width form? Here are some practical tips for you. First of all, full-width English letters and numbers refer to characters that occupy a full-width position in the input method, while half-width English letters and numbers occupy a full-width position.

PyCharm Beginner's Guide: Practical Tips for Deleting Projects PyCharm is a powerful Python integrated development environment (IDE). When developing projects, sometimes you need to delete projects or files in the projects. This article will introduce practical techniques for deleting projects in PyCharm, and provide specific code examples to help novices better understand and apply. 1. Delete the project Deleting the project means deleting the entire project folder, which is very useful when we need to clean or rebuild the project. Delete in PyCharm

The word demo is no longer unfamiliar to friends who like to sing, but many users who have never been exposed to it are curious about what demo means. Now let’s take a look at the meaning of the demo brought by the editor. What does demo mean? Answer: Demo tape. 1. The pronunciation of demo is ['deməʊ] in English and ['demoʊ] in America. 2. Demo is the abbreviation of "demonstration", which generally refers to the preliminary effect of listening to a song before it is officially recorded. 3. Demo is used as a noun to refer to sample tapes and sample records. The meaning of verb is trial (especially software), demonstration and demonstration;

Simple use of pythonrandom library demo When we need to generate random numbers or randomly select elements from a sequence, we can use Python's built-in random library. The following is an annotated example that demonstrates how to use the random library: #Import random library importrandom #Generate a random decimal between 0 and 1 random_float=random.random()print(random_float)#Generate a random decimal within the specified range Random integer (including endpoints) random_int=random.randint(1,10)print(random_int)#

Learn the Django Framework from Scratch: Practical Tutorials and Examples Django is a popular Python web application framework that simplifies the website development process. It provides a powerful set of tools and libraries to help developers build efficient, scalable and secure web applications. For beginners, learning Django may be difficult, but through some practical tutorials and examples, you can quickly get started and understand the core concepts and usage of this framework. This article will take you step by step to learn the Django box
![[Linux Tools]-yum/gdb usage tutorial!](https://img.php.cn/upload/article/000/887/227/170978100851477.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
yum is a commonly used software package management tool, and gdb is a powerful debugging tool. The following are their usage tutorials: yum usage tutorial: Install software packages: Use the yuminstall command to install software packages. For example, to install the Apache web server, you can run yuminstallhttpd. Upgrade software packages: Use the yumupdate command to upgrade installed software packages. For example, running yumupdate will upgrade all packages in the system. Delete a software package: Use the yumremove command to delete a software package. For example, to remove the Apache Web server, you can run yumremovehttpd. Search for packages: use yumsear

To view the bandwidth and network usage of a Linux server, you can use the following commands and tools: ifconfig command: the ifconfig command is used to display and configure network interface information, including bandwidth and network usage. Use the following command to view information for all network interfaces: ifconfig This command will display detailed information for each network interface, including the number of packets received and sent, and network usage. ip command: The ip command is a more powerful alternative for displaying and configuring information such as network interfaces and routing tables. Use the following command to view information for all network interfaces: ip-slink This command will display statistics for each network interface, including the number of packets received and sent, and network usage

Laravel Elixir is a popular front-end automation tool set based on Gulp, which simplifies many tasks that previously required manual work. But Laravel Elixir's elegant API design does not mean that developers do not need to understand the use of Gulp at all. On the contrary, understanding the use of Gulp can better understand the working principle of Laravel Elixir and improve development efficiency. This article will introduce how to use Gulp in Laravel Elixir framework
