使用gulp库、less转换css、html提取公共部分、js转换成ES6语法

在下载gulp库之前应该先初始化

npm init -y

nrm 是一个用于管理 npm 源的工具。它允许你在不同的 npm 源之间切换，以便加快安装速度或解决与某些源相关的问题。

使用 nrm 可以列出可用的 npm 源，并且可以快速切换当前使用的源。通过切换到合适的源，你可以选择更快的镜像，从而提高包的下载速度和安装效率。

npm install nrm -g

 当你的这条npm install nrm -g报错时，复制下面这行代码：

set-ExecutionPolicy RemoteSigned

这行代码运行之后退出vsc，重新以管理员身份运行vsc

---

使用taobao镜像

nrm use taobao

查看nrm是否成功 

nrm ls 

下载gulp库

npm install gulp

安装gulp文件

引入gulp-htmlmin库文件

npm install gulp-htmlmin

下载命令行（脚手架）

npm install gulp-cli -g

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin',callback=>{
    gulp.src('./src/*.html')    //对src路径下的所有html文件
        .pipe(htmlmin({ collapseWhitespace: true })) //进行压缩
        .pipe(gulp.dest('dist')); 
        callback();

})  

使用gulp 文件名来运行

gulp htmlmin

---

 

公共样式代码提取  

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
//
const fileinclude = require('gulp-file-include');
gulp.task('htmlmin',callback=>{
    gulp.src('./src/*.html')    //对src路径下的所有html文件
    //抽取HTML文件中的公共代码
        .pipe(fileinclude())
        .pipe(htmlmin({ collapseWhitespace: true })) //进行压缩
        .pipe(gulp.dest('dist')); 
        callback();

})  

在src路径下新建common文件夹，然后新建header.html文件放置在公共区域的header.html的内容为default.html和article.html的头部区域。

在终端执行：

npm install gulp-file-include

在default.html和article.html头部区域里面改为

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

再次运行：

gulp htmlmin

效果如下：（这里是我做完less转换css截的图片，所以包含了dist/css这个路径）

 

---

 

 less语法转换为css并且压缩

 安装插件：

npm install gulp-less 

npm install gulp-csso

引入模块：

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

调用代码如下：

//任务二：完成less语法转换并压缩css文件
gulp.task('cssmin',callback=>{
    gulp.src(['./src/css01/*.less'],['./src/css/*.css'])    //对src路径下css文件夹的所有css文件
        .pipe(less())   //将less语法转换为css代码
        .pipe(csso())   //压缩css代码
        .pipe(gulp.dest('dist/css')); 
        callback();

})

//

---

 

 JS转换成ES6语法并压缩

安装4个插件：

npm install gulp-babel

npm install '@babel/core'

npm install '@bable/preset-env'

npm install gulp-uglify

 

 引入模块：

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

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

执行代码如下：

//任务三：完成js语法转换成ES6语法并压缩
gulp.task('jsmin',callback=>{
    gulp.src('./src/js/*.js')    //对src路径下css文件夹的所有css文件
    
        .pipe(babel({
            //判断当前代码的运行环境，将代码转换成当前运行环境所支持的代码
            presets:['@babel/env']
        }))
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify());//压缩js代码
        callback();

})

效果如下：

//任务四：复制目录
gulp.task('copy',callback=>{
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'));
    callback();
})

// 执行全部的构建任务
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy'));