Node.js third-party modules Gulp - study

First, third-party modules Gulp

Front-end node platform build tool based on
the write operation into a mechanized task, execute a command line command you want to execute the task mechanized operations can be performed automatically
by machine instead of by hand, to improve development efficiency.

Second, what do Gulp

Project on line, HTML, CSS, JS file compression merge
syntax conversion (es6, less ...)
public file pulled
modify the file browser automatically refresh

Three, Gulp use

1. Use npm install gulp gulp download library
2. Establish gulpfile.js file in the root directory of the project
3. Reconstruction Project Files folder structure of the source document placed src directory placed build the file directory dist
4. Writing tasks gulpfile.js file.
5. Gulp perform tasks in command-line tool
   

Fourth, the method provided Gulp

gulp.src (): Get File tasks to be processed
gulp.dest (): output file
gulp.task (): establish gulp task
gulp.watch (): monitoring file changes

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

Fifth, part Gulp plug

gulp-htmlmin: html file compression
gulp-csso: Compression CSS
GULP-babel: JavaScript syntax conversion
gulp-less: less syntax conversion
gulp-uglify: compression confuse JavaScript
GULP-File-file that contains the include public
browsersync browser real-time synchronization
more have reference .npmjs.com, here just to learn how to operate gulp plugins, web, there are more and more rich plug.

(1) gulp-htmlmin: html file compression, gulp-file-include public file containing the
first command to run

  npm install  gulp-htmlmin
  npm install gulp-file-include

Editing code

In the html file, save the code in a public common.html.
Html plus need to reference in the body

@@include('./common/header.html')

 const htmlmin = require('gulp-htmlmin');

//html任务
//1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
	gulp.src('./src/*.html')
	    //抽取html文件中的公共代码
		.pipe(fileinclude())
		// 压缩html文件中的代码
		.pipe(htmlmin({ collapseWhitespace: true }))
		.pipe(gulp.dest('dist'));
});
});

(2) gulp-csso: compress css, gulp-less: syntax conversion less
first run command

   npm install gulp-csso
   npm install gulp-less

Editing code

const less = require('gulp-less');
const csso = require('gulp-csso');

// css任务
//  1.less语法转换
 //2.css代码压缩
 gulp.task('cssmin', () => {
  	// 选择css目录下的所有less文件以及css文件
 	gulp.src(['./src/css/*.less', './src/css/*.css'])
 		// 将less语法转换为css语法
		.pipe(less())
 		// 将css代码进行压缩
 		.pipe(csso())
 		// 将处理的结果进行输出
 		.pipe(gulp.dest('dist/css'))
 });

(3) gulp-babel: JavaScript syntax conversion, gulp-uglify: compression confuse JavaScript
commands first run

  npm install --save-dev gulp-babel @babel/core @babel/preset-env
  npm install --save-dev gulp-uglify

Editing code

const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
	gulp.src('./src/js/*.js')
		.pipe(babel({
			// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});