gulp是什么?
gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成。是通过流和代码优于配置的策略来尽量简化任务编写的工作。
gulp的特点
易于使用:通过代码优于配置,让复杂的任务可管理
建构快速:利用node,可以快速构建项目并减少频繁的 IO 操作
易于学习
gulp安装
(1)全局安装
npm install gulp-cli@2.3.0 -g
// @2.3.0表示全局gulp-cli的版本
(2)在项目中安装gulp
npm init
npm install gulp@4.0.2 --save-dev
gulp -v
(3)项目构建
![](https://i-blog.csdnimg.cn/blog_migrate/9594d9b6e17ea078b5731d2f927357cb.png)
在gulpfile.js文件中编写构建项目的任务
const gulp = require('gulp');
//使用gulp.task()方法建立任务
gulp.task('first',(callback)=>{
//获取要处理的文件
gulp.src('./src/css/base.css')
//将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
callback
});
在命令行工具中执行gulp任务
//gulp+任务名
gulp first
执行任务时容易遇到的问题:
因为在此系统上禁止运行脚本
我们通过管理员权限运行power shell,然后输入命令:
set-ExecutionPolicy RemoteSigned
选全是或者按A
gulp的使用
常用插件
清空文件夹:gulp-clean
编译css:gulp-sass
压缩图片:gulp-imagemin
深度压缩图片:imagemin-pngquant
压缩css:gulp-cssmin
css前缀:gulp-autoprefixer
压缩js:gulp-uglify
通过gulp-htmlmin 插件和gulp-file-include 插件实现压缩并抽取HTML中的公共代码步骤如下:
1. 下载安装压缩HTML文件插件gulp-htmlmin
2. 在gulpfile.js文件中引用gulp-htmlmin插件
3. 在gulpfile.js文件中调用gulp-htmlmin插件,实现HTML文件中代码的压缩
4. 查看dist目录结构
5. 下载gulp-file-include插件,抽取 HTML中的公共代码
6. gulpfile.js文件中引用gulp-file-include插件
7. 在gulpfile.js文件中调用gulp-file-include插件,抽取 HTML中的公共代码
8. 新建common目录,在公共目录新建公共代码部分文件
9. 删除原文件中公共部分,使用@@include()方法引入公共部分
10. 打开命令行工具,执行gulp htmlmin
1. 下载安装压缩HTML文件插件gulp-htmlmin
2. 在gulpfile.js文件中引用gulp-htmlmin插件
3. 在gulpfile.js文件中调用gulp-htmlmin插件,实现HTML文件中代码的压缩
4. 查看dist目录结构
5. 下载gulp-file-include插件,抽取 HTML中的公共代码
6. gulpfile.js文件中引用gulp-file-include插件
7. 在gulpfile.js文件中调用gulp-file-include插件,抽取 HTML中的公共代码
8. 新建common目录,在公共目录新建公共代码部分文件
9. 删除原文件中公共部分,使用@@include()方法引入公共部分
10. 打开命令行工具,执行gulp htmlmin
将CSS文件使用的Less语法转换为CSS语法,并压缩CSS文件中的代码步骤如下:
1. 下载安装Less语法转换插件gulp-less
2. 在gulpfile.js文件中引用gulp-less插件
3. 在gulpfile.js文件中调用gulp-less插件,实现Less语法转换为CSS语法
4. 新建需要编译的文件,使用less编写一段代码
5. 打开命令行工具,执行gulp cssmin将less语法转换成css语法
6. 下载安装csso语法转换插件gulp-csso
7. 在gulpfile.js文件中引用gulp-csso插件
8. 在gulpfile.js文件中调用gulp-csso插件,完成对css代码的压缩
1. 下载安装Less语法转换插件gulp-less
2. 在gulpfile.js文件中引用gulp-less插件
3. 在gulpfile.js文件中调用gulp-less插件,实现Less语法转换为CSS语法
4. 新建需要编译的文件,使用less编写一段代码
5. 打开命令行工具,执行gulp cssmin将less语法转换成css语法
6. 下载安装csso语法转换插件gulp-csso
7. 在gulpfile.js文件中引用gulp-csso插件
8. 在gulpfile.js文件中调用gulp-csso插件,完成对css代码的压缩
将JavaScript中ES6语法的转换,并压缩JavaScript文件中的代码步骤如下:
1. 下载安装语法转换插件gulp-babel @babel/core @babel/preset-env
2. 在gulpfile.js文件中引用gulp-babel插件
3. 在gulpfile.js文件中调用gulp-babel插件,实现ES6语法转换
4. 新建需要编译的文件,使用jsmin编写一段代码
5. 打开命令行工具,执行gulp jsmin
6. 下载安装js代码压缩插件gulp-uglify
7. 在gulpfile.js文件中引用gulp-uglify插件
8. 在gulpfile.js文件中调用gulp-uglify插件,完成对js代码的压缩
1. 下载安装语法转换插件gulp-babel @babel/core @babel/preset-env
2. 在gulpfile.js文件中引用gulp-babel插件
3. 在gulpfile.js文件中调用gulp-babel插件,实现ES6语法转换
4. 新建需要编译的文件,使用jsmin编写一段代码
5. 打开命令行工具,执行gulp jsmin
6. 下载安装js代码压缩插件gulp-uglify
7. 在gulpfile.js文件中引用gulp-uglify插件
8. 在gulpfile.js文件中调用gulp-uglify插件,完成对js代码的压缩
将src目录下的images目录和lib目录,复制到dist目录下步骤如下:
1. 在gulpfile.js文件中创建copy任务,进行目录复制操作。
2. 运行命令‘
gulp copy’
3. 执行成功后,查看dist目录的结构,是否将images目录和lib目录成功复制
通过使用命令“gulp 任务名”去执行单个任务,实现执行一个任务,其他任务也一起执行
1. 在gulpfile.js文件中创建default任务
2. 使用gulp.series()按顺序执行任务
3. 打开命令行工具,运行“gulp default”命令
1. 在gulpfile.js文件中创建default任务
2. 使用gulp.series()按顺序执行任务
3. 打开命令行工具,运行“gulp default”命令