Gulp工具

1、gulp使用

1. npm install gulp下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件
3. 重构项目的文件夹结构 src结构放置源代码文件 dist目录放置构建后文件
4. 在gulpfile,js文件中编写任务
5. 在命令行工具中执行gulp任务

2、gulp中提供的方法

1. gulp.src() 获取任务要处理的文件
2. gulp.dest() 输出任务
3. gulp.task() 建立gulp任务
4. 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'));
});