一、Gulp的使用
1. 使用npm install gulp 下载gulp库文件
2. 在项目根目录下简历gulpfile.js文件
3. 重构项目的文件夹架构src目录放置源代码文件,dist目录防止构建后文件。
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务。
二、Gulp中提供的方法
1. gulp.src(0 获取任务要处理的文件
2. gulp.dest() 输出文件
3. gulp.tast() 简历gulp任务
4. gulp.watch() 监控文件的变化
/**
* 以下代码实现的功能相当于复制了一些东西
*/
// 引入gulp模块
const gulp = require('gulp')
// 使用gulp.task() 方法建立任务
gulp.task('first',()=>{ // 这里first是任务名称,后面是回调函数,用来处理该任务的;
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/csss'))
})
三、安装gulp用的命令行工具:gulp-cli
在终端中执行命令:npm install gulp-cli -g
通过执行该命令,可以在全局安装gulp的命令行工具。
** 安装好全局gulp命令工具以后,可以通过gulp命令执行文件了。
【这几个链接里面有几个小问题的解决方案】
https://blog.csdn.net/qq_41208114/article/details/79109269
https://blog.csdn.net/WU5229485/article/details/90173693
四、gulp 插件
1. gulp-htmlmin : HTML文件压缩插件
2. gulp-csso : 压缩css
3. gulp-babel : JavaScript 语法转化 如es6转化成es5
4. gulp-less : less语法转化
5. gulp-uglify : 压缩混淆 JavaScript
6. gulp-file-include: 公共文件包含
7. browsersync 浏览器实时同步
**插件的使用很简单:只需要三步:
1、下载插件
2、引入插件
3、使用插件
例如:下载gulp-htmlmin插件
1. npm install gulp-htmlmin
手机扫一扫
移动阅读更方便
你可能感兴趣的文章