NodeJS中安装第三方模块`Gulp`以及它的使用

目录

• NodeJS中安装第三方模块Gulp以及它的使用
  • Gulp能够做什么
  • Gulp的使用
    • 使用npm install gulp 下载gulp库文件
    • 在项目根目录下建立gulpfile.js文件
    • 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件
    • 在gulpfile.js文件中编写任务.
      • Gulp中提供的方法
    • 在命令行工具中执行gulp任务
  • Gulp插件
    • gulp-htmlmin：html文件压缩
    • gulp-less：less语法转化， gulp-csso：压缩css
    • gulp-uglify：压缩混淆JavaScript， gulp-babel：JavaScript语法转化

NodeJS中安装第三方模块Gulp以及它的使用

• 基于node平台开发的前端构建工具

• 将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了

• 用机器代替手工，提高开发效率。

Gulp能够做什么

• 项目上线，HTML，CSS、JS文件压缩合并

• 语法转换（es6，less...）

• 公共文件抽离

• 修改文件浏览器自动刷新

Gulp的使用

使用npm install gulp 下载gulp库文件

在项目根目录下建立gulpfile.js文件

重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件

在gulpfile.js文件中编写任务.

Gulp中提供的方法

• gulp.src(): 获取任务要处理的文件
• gulp.dest(): 输出文件
• gulp.task(): 建立gulp任务
• gulp.watch: 监控文件的变化

// 引用gulp模块
const gulp = require('gulp');
// 使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数
gulp.task('first', () =>{
    console.log('人生中的第一个gulp任务执行了！');
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css'))
})

要运行gulp任务还需要下载一个gulp给我们提供的命令行工具偶！

npm i gulp-cli -g

在命令行工具中执行gulp任务

gulp 你要执行的任务名称

gulp first

出现报错信息

原因：

这是 gulp4.0 版本使用 task 时，回调函数使用匿名函数带来的问题，gulpgulp 不再支持同步任务

解决方案有很多具体参考 https://www.gulpjs.com.cn/docs/getting-started/async-completion/

比较简单的方法就是 添加 callback，来指示函数完成

即代码修改为:

// 引用gulp模块
const gulp = require('gulp');
// 使用gulp.task建立任务
// 1. 任务的名称
// 2. 任务的回调函数
gulp.task('first', (cb) =>{
    console.log('人生中的第一个gulp任务执行了！');
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css'))
    cb();
})

😄

Gulp插件

gulp-htmlmin：html文件压缩

gulp-less：less语法转化， gulp-csso：压缩css

先下载模块npm i gulp-less

dest: gulp-less

// 引用gulp模块
const gulp = require('gulp');
const less = require('gulp-less');

// css任务
// 1、less语法转换
// 2、css代码压缩
gulp.task('cssmission', (cb) => {
    gulp.src('./src/css/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'))
    cb();
})

怎样同时选中css文件和less文件呢？！

// css任务
// 1、less语法转换
// 2、css代码压缩
gulp.task('cssmission', (cb) => {
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        .pipe(less())
        .pipe(gulp.dest('dist/css'))
    cb();
})

下载csso的下载模块：

dest: gulp-csso

npm i gulp-csso

// 引用gulp模块
const gulp = require('gulp');
const less = require('gulp-less');
const csso = require('gulp-csso');

// css任务
// 1、less语法转换
// 2、css代码压缩
gulp.task('cssmission', (cb) => {
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('dist/css'))
    cb();
})

可以看到，已完成压缩！

gulp-uglify：压缩混淆JavaScript， gulp-babel：JavaScript语法转化

gulp-file-include：公共文件包含

browsersync：浏览器实时同步