Gulp 学习笔记

Gulp 学习笔记

目录

​​1. 什么是Gulp？​​​​2. Gulp的基本使用​​

​​2.1 使用步骤​​​​2.2 Gulp方法​​​​2.3 第三方插件​​

​​3. Webpack和Gulp的区别​​

1. 什么是Gulp？

概念： Gulp是基于Node平台开发的前端自动化构建工具。将机械化的操作编写成任务，在需要执行机械化操作时，执行一个命令行任务就可以自动执行了。

作用： 那Gulp能做什么呢？

项目上线，HTML、CSS、js文件的压缩、合并、重命名语法的转化（ES6、Less、Scss等）公共文件的抽离修改文件浏览器的自动化刷新

2. Gulp的基本使用

2.1 使用步骤

Gulp的基本使用步骤：

安装gulp的库文件:​​npm install gulp​​在项目的根目录创建配置文件：​​gulpfile.js​​调整项目的文件夹结构：src目录放源代码文件，dist目录放构建后的文件在​​gulpfile.js​​文件中编写任务在命令行工具中执行任务

2.2 Gulp方法

下面来看一下Gulp中提供的方法：

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

// 创建任务const gulp = require('gulp')gulp.task('task', () => { // 获取要处理的文件 gulp.src('./src/css/base.css') // 将要处理的文件输出到dist目录 .pipe(gulp.dest('./dist/css'))})// 执行任务

以上就是gulp提供的方法，以及方法的使用步骤。

2.3 第三方插件

那我们上面也说了，gulp还可以提供像代码压缩，代码打包等任务，那他们是怎么实现的呢？实际上，这些功能的实现是需要依赖第三方插件的，下面看一些几个常见的插件：

​​gulp-htmlmin​​ ：html文件压缩​​gulp-csso​​ ：压缩css​​gulp-babel​​ ：JavaScript语法转化​​gulp-less​​: less语法转化​​gulp-uglify​​ ：压缩混淆JavaScript​​gulp-file-include​​ 公共文件包含​​browsersync​​ 浏览器实时同步​​gulp-ruby-sass​​：Sass编译​​gulp-autoprefixer​​：自动修复程序​​gulp-jshint​​：JSHint代码规范​​gulp-concat​​：合并文件，CSS或JS​​gulp-imagemin​​'：压缩图片​​gulp-cache​​缓存处理​​gulp-livereload​​：实时刷新​​gulp-notify​​：文件修改通知​​del​​：清理文件

这些插件的基本使用方法就是：

安装插件引入插件调用插件

HTML文件操作任务：

下面我们使用Gulp的插件完成HTML文件的公共部分抽离以及文件的压缩操作：

// 1. -安装插件npm install gulp-htmlminnpm install gulp-file-include// 2. 引用插件const htmlmin = require('gulp-htmlmin')const fileinclude = require('gulp-file-include')// 3. 使用插件gulp.task('htmlmin', () => { // 获取要处理的文件（这里*是指所有的HTML文件） gulp.src('./src/*.html') // 创建抽离公共代码的任务 .pipe(fileinclude()) // 创建压缩HTML文件的任务 .pipe(htmlmin({ collapseWhitespace: true }) // 将处理的文件输出到dist目录 .pipe(gulp.dest('./dist'))})// 4.

需要注意的是，task中的任务执行是有顺序的。抽取公共代码的任务需要在压缩文件之前进行。

CSS文件操作任务：

使用Gulp的插件，将less文件转化成less，并对css文件进行压缩操作：

npm install gulp-lessnpm install gulp-csso const less = require('gulp-less')gulp.task('cssmin', () => { // 获取要处理的文件（这里*是指所有的Less文件） gulp.src(['./src/css/*.less', './src/css/*.css']) // 创建将Less转化成css的任务 .pipe(less()) // 创建css文件压缩的任务 .pipe(csso()) // 将处理的文件输出到dist目录 .pipe(gulp.dest('./dist/css'))})

注意：如果引入的路径有多个，可以使用数组来操作。

JavaScript文件操作任务：

下面来实现一下ES6打码的转换以及JavaScript文件的压缩操作：

// 这里babel插件后面的两个是babel的依赖npm install gulp-babel @babel/core @babel/preset-envnpm install gulp-uglifyconst babel = require('gulp-babel')const uglify = require('gulp-uglify')gulp.task('jsmin', () => { // 获取要处理的文件（这里*是指所有的js文件） gulp.src( './src/js/*.js') // 创建js文件语法转化的任务 .pipe(babel({ //他可以判断当前代码的运行环境，将代码转化为当前运行环境支持的代码 presets: ['@babel/env'] })) // 将js文件进行压缩处理 .pipe(uglify()) // 将处理的文件输出到dist目录 .pipe(gulp.dest('./dist/js'))})

复制文件夹操作：

对于源代码文件中的images等文件，我们需要直接拷贝到dist目录中，这里创建一个文件夹复制的任务。

gulp.task('copy', () => { // 获取要处理的文件（这里*是指所有的图片文件） gulp.src( './src/images/*') // 将处理的文件输出到dist目录 .pipe(gulp.dest('./dist/images')) gulp.src( './src/lib/*') .pipe(gulp.dest('./dist/lib'))})

构建任务：

上面已经创建了四个任务，我们可以创建一个构建任务，一次性的执行上面的四个任务：

gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy'])// 执行任务gulp default// 也可以直接执行gulp，因为默认名称是default，所以执行gulp就会去找名称为default的任务

执行default任务之后，就会依次执行以上四个任务。

3. Webpack和Gulp的区别

gulp是工具链，构建工具，可以配合各种插件做JS压缩，CSS压缩，less编译替代手动实现自动化工作。

所以它的主要作用是：

构建工具自动化提高效率，优化前端工作流程

webpack是文件打包工具，可以把项目的各种js文件，css文件等打包合成一个或多个文件，主要用于模块化方案，预编译模块的方案。

所以它的主要作用是：

打包工具模块化识别编译模块代码方案

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。