1、gulp使用
- npm install gulp下载gulp库文件
- 在项目根目录下建立gulpfile.js文件
- 重构项目的文件夹结构 src结构放置源代码文件 dist目录放置构建后文件
- 在gulpfile,js文件中编写任务
- 在命令行工具中执行gulp任务
2、gulp中提供的方法
- gulp.src() 获取任务要处理的文件
- gulp.dest() 输出任务
- gulp.task() 建立gulp任务
- gulp.watch() 监控文件的变化
- gulp运行以及使用
全局安装npm install gulp-cli -g
在项目命令行下 输入 gulp 任务名称
// 引用gulp模块
const gulp =require('gulp');
// 使用gulp.task建立任务
// 1 任务的名称
// 2 任务的回掉函数
gulp.task('first',()=>{
console.log('我们人生中的第一个gulp任务');
// 1 使用gulp.src获取处理的文件
gulp.src('./src/css/index.css')
.pipe(gulp.dest('dist/css'))
})
3、gulp插件
- gulp-htmlmin html文件压缩
- gulp-csso 压缩css
- gulp-babel javascript语法转化
- gulp-less less语法转化
- gulp-uglify 压缩混淆JavaScript
- gulp-file-include 公开文件包含
- browsersync 浏览器始是同步
插件的使用 查询api – 下载插件 --引入操作 --使用插件
const htmlmin =require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
// html任务
// 1 html文件中代码的压缩操作
// 2 抽取html文件中的公开代码
gulp.task('htmlmin', () => {
return gulp.src('./src/*.html')
// 抽取公开样式
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
// 输出到dest文件
.pipe(gulp.dest('dist'));
});