node.js中的gulp工具

gulp为node.js的一个前端自动处理任务的工具（感觉有点像函数）
1全局安装gulp-cil
2在项目中安装gulp
3构建项目与使用

打开Visual Studio Code
新建文件

 

1.全局安装gulp-cli
打开终端，输入   npm i gulp-cli -g （终端在右上角）(要先安装node.js) (-g为全局安装）

输入gulp -v，检查是否安装成功

 

2.输入 npm -init   初始化项目，（出现的询问输入回车就可）

  局部安装gulp 并检查

npm i gulp --save-dev

gulp -v

3.构造项目

新建gulpfile.js（在node_modules同级就行）

dist与src也是新建的目录（src内为一些html，css，js代码）（dist为空目录）

 

 在gulpfile.js内输入（这文件名称不可改变）

const gulp = require('gulp');//引入gulp板块



// default 表示一个任务名，为默认执行任务
gulp.task('first', (callback) => {//first为任务名
    // 放置默认的任务代码
    gulp.src('./src/css/base.css')//gulp.src为要获得什么文件
    .pipe(gulp.dest('./dist/css'))//.pipe（）为处理结果包装，gulp.dest（）为保存文件，括号内为要保存的目录
    callback()//立即执行
  })

 在终端内执行（输入gulp加名称）

 在空目录dist内会多出一个css文件夹内有一个css文件

这就是gulp的使用

下面介绍常用的插件与使用

 gulp-htmlmix 压缩html文件（去除空格，换行地，但可以正常使用）

gulp-csso 压缩css

gulp-babel js语法转换

gulp-less less语法转换

gulp-sass sass语法转换

gulp-uglify 压缩混淆的js文件

gulp-file-include公共文件包含

browsersync 浏览器时间同步

使用插件

1，安装（不安装就像要写字没有笔一样）

在控制台输入

npm i gulp-htmlmin

 检查，在目录package,json中有插件的名称

、

 2.引入（写字要把笔拿到手上）

在 gulpfile.js引用

同理，下载并引入gulp-file-include插件 

 3.新建任务

gulp.task('htmlmin', callback => {
  gulp.src('./src/*.html')
    // 抽取后缀为html文件中的公共代码
    .pipe(fileinclude())
    // 压缩html文件中的代码
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('./dist'))
  callback();
})

执行，就ok了

（在src内新建文件夹，建header.html文件，把html头部w公共代码写进来

把src内的html文件头部删掉换成@@include("./目录名/header.html")（@@include为语法，接公共代码的文件））

 

 

 

其它插件也大同小异，写累了，不想写了，我就只发截图了

安装

引入

 创任务

// 建立任务：压缩css代码并转换less语法
gulp.task('cssmin', callback => {
  // 获取文件.less 和.css
  gulp.src(['./src/css/*.less', './src/css/*.css'])
    // 将less语法转换为css语法
    .pipe(less())
    // 压缩css代码
    .pipe(csso())
    // 输出文件
    .pipe(gulp.dest('./dist/css'))
  callback();
})

效果 

 

 

 注，当任务过多时，不想一个一个执行，可以建一个任务执行全部任务

gulp.task('all',gulp.series('first','htmlmin','cssmin','copy'))

执行gulp all就可以执行后全部任务