Gulp简介gulp基本使用步骤gulp-cli工具gulpfile.js文件gulp插件

Posted 2021-08-08 苦海123

Gulp介绍：

gulp概念：

基于node开发的前端构建工具模块，将前端机械化的操作编写成任务自动化操作，类似于webpack构建，可以完成代码压缩、语法转换、抽离公共文件、自动实现浏览器刷新等。

基本使用步骤：

1.使用npm install gulp下载gulp库文件。

2.在项目文件夹中新建gulpfile.js文件，注意文件名固定不变。

3.重构项目文件夹目录结构：新建src文件夹（存放项目源代码）、新建dist文件夹（存放处理后的代码）。

4.在gulpfile.js文件中编写任务，类似于webpack.config.js文件，但是语法完全不同。

5.在命令行执行gulp任务（gulp 任务名）;如果想要执行一次任务实现多个任务被执行，就得构建多任务执行任务，具体只需将task方法中第二个参数callback换成数组，数组中传入任务名字符即可。（当任务名为defalut时，命令行中执行命令是可以省略任务名）

gulp-cli工具：

gulp-cli类似webpack-cli，需要全局安装此工具，后面可以方便使用gulp,全局安装：npm install gulp-cli -g;

编写gulpfile.js文件：

gulp提供了基本的几种方法用于编写任务，如：

gulp.src()获取任务要处理的文件

gulp.dest()输出文件

gulp.task()建立gulp任务

gulp.watch()监控文件的变化

gulp插件（很多，下面只是举例）：

gulp-htmlmin ,压缩html文件的插件

gulp-csso ,压缩css文件的插件

gulp-babel ,js语法转换的插件

gulp-less ,less语法转化的插件

gulp-file-include ,共文件包含插件

gulp-ugligy ,压缩混淆js插件

browsersync ,浏览器同步更新插件

插件使用：

1.npm install 插件名

2.在gulpfile.js文件中引入此插件

3.调用此插件

	// 1.引入gulp：
    const gulp = require('gulp');
    
    const htmlmin =require('gulp-htmlmin');
    // 2.使用task('任务名'，callback)方法创建任务：
    gulp.task('myhtmlmin',()=>{
      // 3.编写任务：实现代码合并压缩等（需要注意的是：gulp是轻量级的模块，如果想要实现具体的功能还得使用插件）
      gulp.src('./src/*.html')//回调函数中可以使用gulp的方法，src用于获取要处理的文件
          .pipe(htmlmin({collapseWhitespace:true}))//pipe处理文件，里面可传入插件方法或gulp本身方法
          .pipe(gulp.dest('dist')//pipe处理后的文件输出到dist文件下
    });