GUlP自动化构建打包工具
gulp 是一个项目开发的 自动化打包构建工具
基于 node 环境来运行的
安装GULP
gulp是一个依赖于node的环境工具
所以我们需要先安装一个全局的gulp依赖
直接使用npm安装就可以了
# 使用npm 安装全局依赖 gulp
$ npm install --global gulp
等待安装完毕就可以了
这个全局环境一个电脑安装一次就可以了
检查一下是否安装成功
$gulp --version
使用GULP
-
1·目录结构
- gulp_demo 项目文件夹 - src 项目源码 +css css文件夹 +js js文件夹 +pages html文件夹 +sass sass文件夹 +lib 第三方文件夹 +static 静态资源文件夹（图片什么的） -
2·在项目文件夹里面执行一个npm 初始化
npm init -y
项目GULP配置
-
安装gulp
在我们之前已经安装过gulp全局依赖了 但是每一个项目都按安装一次gulp的项目依赖 因为每一个项目的打包构建规则不一样，所以不能全局都配成一个 所以我们要在项目里面再进行gulp安装 $ad gulp_demo $npm install -D gulp 在项目中的gulp依赖要和全局的gulp环境保持版本一致 -
项目进行打包构建配置的时候，在项目目录下新建一个
gulpfile.js -
gulp进行构建的时候就会按照gulpfile.js文件里面的规则进行打包构建
-
接下来在gulpfile.js文件里配置，让我们的打包构建可以生效
GULP API（用法）
-
task()
每个gulp任务都是一个异步JavaScript函数 //创建名为css的任务 gulp.task('css',function(){ //执行任务的代码 }) -
src()
创建一个流，用于从文件读取 数据对象 -
dest()
创建一个用于将数据对象写入到文件系统的流 -
pipe
管道 -
series()
将任务函数、或组合操作合成更大的操作，这些操作按顺序执行 gulp.series('js','css') gulp.task('test',gulp.serise('copy','js')) -
paralle()
将任务并发执行 gulp.paralle('js','css') gulp.task('test',gulp.paralle('copy','js')) -
watch()
监听文件系统并在发生改变时运行任务
打包操作
-
打包CSS文件
依赖于npm i -D gulp-cssmin /** * 创建css构造任务 */ gulp.task('css', function () { return gulp.src('./src/css/**') .pipe(cssmin()) .pipe(gulp.dest('./dist/css/')) }) -
打包SASS文件
依赖于 npm i -D gulp-sass npm i sass /** * sass任务 * 1. sass -> css * 2. 压缩css * 3. dist */ gulp.task('sass', function () { return gulp.src('./src/sass/**') .pipe(sass()) //sass->css .pipe(cssmin()) //压缩css .pipe(gulp.dest('./dist/css/')) }) -
打包js文件
依赖于npm i -D gulp-uglify 压缩 及编译 ES6 语法 （ES6 转 ES5 比如箭头函数转为function） /** * js任务 * 1. js高版本语法->低版本，兼容用户浏览器 * bable * 2. js压缩 * 3. dist/js */ gulp.task('js', function () { return gulp.src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js/')) }) -
打包HTML文件
需要依赖 npm -D gulp-htmlmin /** * html任务 */ gulp.task('html', function () { return gulp.src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttributes: true, collapseWhitespace: true })) .pipe(gulp.dest('./dist/pages/')) }) -
打包LIB和STATIC文件
这些都是第三方的文件和一些图片之类的信息 不需要压缩只需要传到dist文件夹下面就可以了
-按顺序批量执行任务
serise将任务按顺序执行
exports.default暴露一个默认任务
跟目录下可直接运行默认任务，通过 gulp命令
exports.default = gulp.serise('css','js','html','lib','static')
执行： gulp
-
同时批量执行任务
paralle多任务同时执行 exports.default暴露一个默认任务 跟目录下可直接运行默认任务，通过 gulp命令 exports.default = gulp.paralle('css','js','html','lib','static') 执行： gulp -
清除DIST文件夹
为什么要清除呢？就好比我已经打包好了我后来更改了一个文件名或者什么，那我就要从新打包，但是在打包的时候会出现重新打包一个文件家的情况所以需要清除了之后我们在打包进去 需要依赖 npm i -D gulp-clean/** * clean */ gulp.task('clean', function () { return gulp.src('./dist/', { allowEmpty: true }) .pipe(clean()) }) -
清除配置成默认任务
series 将任务按顺序执行 和 parallel 同时执行任务 嵌套执行exports.default = gulp.series('clean', gulp.parallel('css', 'sass', 'js', 'html', 'lib', 'static')) -
自动打开浏览器
依赖于npm i -D gulp-webserver/** * webserver */ gulp.task('webserver', function () { return gulp.src('./dist/') .pipe(webserver({ host: 'localhost', port: 3000, livereload: true, open: './pages/index.html' })) }) -
修改内容西东刷新
再制作一个任务，当文件夹下的内容修改的时候，自动帮我们重新编译 不需要任何依赖，我们只需要配置一个监控文件改变的任务就行了/** * watch */ 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/lib/**', gulp.parallel('lib')) gulp.watch('./src/static/**', gulp.parallel('static')) }) -
安装包 -D参数
npm install -S sass 线上环境依赖 npm install -D sass 开发dev环境依赖
GULP完成配置文件
-
所有需要用到的依赖包
- gulp
- gulp-cssmin
- gulp-sass
- gulp-uglify
- gulp-babel@70.0.1
- babel-core
- babel-preset-es2015
- gulp-htmlmin
- gulp-clean
- gulp-webserver
-
一个示例
/**
gulp项目开发步骤:
1. 按照gulp目录结构创建项目
2. 初始化项目 npm init
3. 本地安装gulp (如果没有全局安装，需要全局安装)
4. gulp配置文件 gulpfile.js
5. 写任务
5.1 压缩css,复制到dist目录
gulp-cssmin 包
*/
const gulp = require('gulp') //引入gulp
const cssmin = require('gulp-cssmin')
// const sass = require('sass')
// const gulpSass = require('gulp-sass')
// const sassObj = gulpSass(sass)
const sass = require('gulp-sass')(require('sass'))
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const htmlmin = require('gulp-htmlmin')
const clean = require('gulp-clean')
const webserver = require('gulp-webserver')
/**
* 创建css构造任务
*/
gulp.task('css', function () {
return gulp.src('./src/css/**')
.pipe(cssmin())
.pipe(gulp.dest('./dist/css/'))
})
/**
* sass任务
* 1. sass -> css
* 2. 压缩css
* 3. dist
*/
gulp.task('sass', function () {
return gulp.src('./src/sass/**')
.pipe(sass()) //sass->css
.pipe(cssmin()) //压缩css
.pipe(gulp.dest('./dist/css/'))
})
/**
* js任务
* 1. js高版本语法->低版本，兼容用户浏览器
* bable
* 2. js压缩
* 3. dist/js
*/
gulp.task('js', function () {
return gulp.src('./src/js/**')
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'))
})
/**
* html任务
*/
gulp.task('html', function () {
return gulp.src('./src/pages/**')
.pipe(htmlmin({
removeEmptyAttributes: true,
collapseWhitespace: true
}))
.pipe(gulp.dest('./dist/pages/'))
})
/**
* static
*/
gulp.task('static', function () {
return gulp.src('./src/static/**')
.pipe(gulp.dest('./dist/static/'))
})
gulp.task('lib', function () {
return gulp.src('./src/lib/**')
.pipe(gulp.dest('./dist/lib/'))
})
// gulp.task('series', gulp.series('css','sass','js','html','static','lib'))
gulp.task('parallel', gulp.parallel('css', 'sass', 'js', 'html', 'static', 'lib'))
/**
* clean
*/
gulp.task('clean', function () {
return gulp.src('./dist/', {
allowEmpty: true
})
.pipe(clean())
})
/**
* webserver
*/
gulp.task('webserver', function () {
return gulp.src('./dist/')
.pipe(webserver({
host: 'localhost',
port: 3000,
livereload: true,
open: './pages/index.html'
}))
})
/**
* watch
*/
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/lib/**', gulp.parallel('lib'))
gulp.watch('./src/static/**', gulp.parallel('static'))
})
exports.default = gulp.series('clean', gulp.parallel('css', 'sass', 'js', 'html', 'static', 'lib'), 'webserver','watch')
