简介
- gulp是一个项目开发的，自动化打包构建工具，基于node环境运行
const gulp = require('gulp')
gulp API
- task()
创建任务
gulp.task('任务名称',function(){
return 任务
})
- src()
创建一个流，用于文件系统读取，数据对象
gulp.task('任务名称',function(){
return gulp.src('读取的路径')
})
- pipe()
管道
gulp.task('任务名称',function(){
return gulp.src('读取的路径').pipe()
})
- dest()
创建一个用于将数据写入对象的文件系统流
gulp.task('任务名称',function(){
return gulp.src('读取的路径').pipe(gulp.dest('输出的路径'))
//通过pipe管道流入到dest并输出
})
- series()
将任务函数/或组合操作组成为更大的操作，这些操作将安顺序依次执行
gulp.task('任务1',function(){
return gulp.src('读取的路径').pipe()
})
gulp.task('任务2',function(){
return gulp.src('读取的路径').pipe()
})
gulp.task('seriew任务',gulp.series('任务1','任务2'))
//启动任务
gulp seriew任务
- parallel()
将任务功能/组合操作同时执行
gulp.task('任务1',function(){
return gulp.src('读取的路径').pipe()
})
gulp.task('任务2',function(){
return gulp.src('读取的路径').pipe()
})
gulp.task('parallel',gulp.series('任务1','任务2'))
//启动任务
gulp parallel
- watch()
监听文件系统 并在发生改变时运行任务
gulp完整配置文件
依赖使用npm下载
- gulp
- gulp-cssmin
- gulp-sass
- gulp-uglify
- gulp-babel@7.01
- babel-core
- babel-preset-es2015
- gulp-htmlmin
- gulp-clean
- gulp-webserver
gulp使用步骤
- 使用命令安装工具
npm i gulp -g - 创建文件夹本地安装
npm i gulp - 按照gulp项目要求组织结构
- 在项目根目录创建配置文件
gulpfile.js - 在配置文件编写代码
引入gulp模块
const gulp = require('gulp')
打包 css
//1、使用npm下载css依赖npm i gulp-cssmin -D
//2、导入gulp模块
const gulp=require('gulp')
//3、导入cssmin模块
const cssmin=require('gulp-cssmin')
gulp.task('名称',function(){
gulp.src('路径').pipe(cssmin()).pipe(gulp.dest('路径'))
//src读取流路径，dest输出流，pipe管道
})
打包 sass
//转为css
//下载 npm i -D gulp-sass 和 npm i sass
//引入模块
const sass = require('gulp-sass')(require('sass'))
//创建任务
gulp.task('sass', function () {
return gulp.src('./src/scss/**')
.pipe(sass())
.pipe(cssmin())
.pipe(gulp.dest('./dist/css/'))
})
打包js
//下载 - npm i -D gulp-uglify
/*
npm i -D gulp-babel@7.0.1
npm i -D babel-core
npm i -D babel-preset-es2015
*/
//引入模块
const gulpUnlify = require('gulp-uglify')
const bebel = require('gulp-babel')
//创建任务
gulp.task('js', function () {
return gulp.src('./src/js/**')
.pipe(bebel({
presets: ['es2015']
}))
.pipe(gulpUnlify())
.pipe(gulp.dest('./dist/js/'))
})
打包html
//下载依赖 npm i -D gulp-htmlmin
//引入模块
const htmlmin = require('gulp-htmlmin')
//创建任务
gulp.task('html', function () {
return gulp.src('./src/pages/**')
.pipe(htmlmin({
removeEmptyAttributes: true, //移出所有空属性
collapseWhitespace: true //压缩html
}))
.pipe(gulp.dest('./dist/pages/'))
})
打包静态资源
//创建任务
gulp.task('static', function () {
return gulp.src('./src/static/**')
.pipe(gulp.dest('./dist/static/'))
})
按顺序批量执行
gulp.task('series', gulp.series('css', 'sass', 'js', 'html', 'static'))
gulp.task('parallel', gulp.parallel('css', 'sass', 'js', 'html', 'static'))
清除dist文件
//下载 npm i -D gulp-clean
//引入模块
const clean = require('gulp-clean')
//创建任务
gulp.task('clean', function () {
return gulp.src('./dist/', {
allowEmpty: true
})
.pipe(clean())
})
直接打开浏览器
//下载依赖 npm i -D gulp-webserver
//创建任务
gulp.task('webserver', function () {
return gulp.src('./dist/')
.pipe(webserver({
host: 'localhost',
port: 3000,
livereload: true,
open: './pages/1314.html'
}))
})
修改内容自动刷新
/**
- watch */
//导入模块
const webserver = require('gulp-webserver')
//创建任务
gulp.task('watch', function () {
gulp.watch('./src/css/**', gulp.parallel('css'))
gulp.watch('./src/sass/**', gulp.parallel('sass'))
gulp.watch('./src/js/**', gulp.parallel('js'))
gulp.watch('./src/pages/**', gulp.parallel('html'))
gulp.watch('./src/static/**', gulp.parallel('static'))
})
简写
exports.default = gulp.series('clean', gulp.parallel('css', 'sass', 'js', 'html', 'static'), 'webserver', 'watch')
//直接写gulp
