Good helper for "Gulp" front-end development

1. The third module Gulp build tool

Front-end construction tool based on Node platform development (need to install node.js)
Write tasks for mechanized operations. When you want to perform mechanized operations, execute a command line command and the task can be automatically executed.
Use machine instead of manual to complete some code compression

2. What can Gulp do

The project is online, and HTML, CSS, and JS files are compressed and merged
Syntax conversion (es6, less...)
Public document extraction
Modify the file browser to refresh automatically

Three, Gulp use

Use to npm install gulpdownload the gulp library file (do not add -g) -g is the global installation, if not, it is the project installation
Create a gulpfile.jsfile in the project root directory
Reconstruction project file folder structure of srcthe directory to place the source code files distdirectory placement to build the file
gulpfile.jsWrite and execute tasks in files
Execute gulp tasks in the command line tool

Four, practical operation

Create a gulp-demo folder in the editor
Hold down shift+right mouse button under the folder to open the PowerShell window cd
Use the npm install gulpdownload gulp library file under this folder . I did not change the downloaded resource here. It will be faster to switch to the domestic Taobao mirror resource
Create one under the gulp-demo folder in the root directorygulpfile.js

Five, the methods provided in Gulp

gulp.src(): Get the file to be processed by the task
gulp.dest(): output file
gulp.task(): create a gulp task
gulp.watch(): monitor file changes
Code example

//通过require引入gulp
const gulp = require('gulp');
//使用gulp.task()建立任务
gulp.task('frist',() = >{
    
    
	//获取要处理的文件
 gulp.src('./src/css/base.css')
 //将处理后的文件输出到dist目录
 .pipe(gulp.dest('./dist/css'))
})

Install the gulp command line tool npm install gulp-cli -gso that you can use gulp to Insert picture description here
use gulp, followed by the name of the task you need to perform,

such a simple gulp task is complete!

Six, Gulp plugin

gulp-htmlmin : HTML file compression

首先需要在当前文件夹下面$ npm install --save gulp-htmlmin

然后引用模块
const htmlmin = require('gulp-htmlmin');


执行任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin',()=>{
    
    
    //这句话的意思是返回上一级目录找到src目录下面的   后缀是html的文件
    gulp.src('./src/*.html')
    .pipe(fileinclude())
    // 压缩html文件中的代码
    .pipe(htmlmin({
    
     collapseWhitespace: true }))
    /*将压缩好的文件压缩到dist文件夹下面*/
    .pipe(gulp.dest('dist/html'));
});

保存后回到命令行界面  执行 gulp htmlmin 就可以了

gulp-csso : compress css
gulp-babel : JavaScript syntax conversion
gulp-less : less syntax conversion
gulp-uglify : Compress and obfuscate JavaScript
gulp-file-include public file include
browsersync browser real-time synchronization

**注意！！！在引入插件的时候  需要在前面  先引入gulp ，不然的话，插件也是会无用的**

That’s all for sharing this time. If you think it’s useful to you, you can use one click for three links~