环境介绍：
pro环境：生产环境，面向外部用户的环境，连接上互联网即可访问的正式环境。
pre环境：灰度环境，外部用户可以访问，但是服务器配置相对低，其它和生产一样。
test环境：测试环境，外部用户无法访问，专门给测试人员使用的，版本相对稳定。
dev环境：开发环境，外部用户无法访问，开发人员使用，版本变动很大。
项目文件的部署
--|src (dev环境 开发环境)
--| html
--| css
--| images
--| js
--| js (直接写js代码的文件)
--| lib(类库 jquery)
--| plug(插件)
--| data
--| dist (pro)
--| html
--| css
--| images
--| js
gulp的目的
打包一个项目
gulp的作用
- 自动压缩JS文件
- 自动压缩CSS文件
- 自动合并文件
- 自动编译sass es6
- 自动压缩图片
- 自动刷新浏览器
gulp的使用
- gulp依赖于node环境
- 在全局安装gulp环境,说明机器上可以运行gulp
- cnpm install gulp@3.9.1 -g
- 在每个gulp项目 依赖gulp
- 在项目开始之前先初始化 package.json文件 , 命令 : cnpm init -y (全局安装)
- 注意 : cnpm install [包] --save 装生产环境依赖
- 注意 : cnpm install [包] --save-dev 装开发环境依赖
gulp的配置
-
在项目根目录下创建一个js文件 , 文件名称gulpfile.js gulp的配置文件
//引入模块 const gulp = require('gulp'); //异步执行：文件的转存 ： 把src/html里面的index.html 转存到 dist/html/ gulp.task('copyfile',() => { //文件的转存 //找到文件所在的路径 gulp //执行命令 ： gulp copyfile .src('./src/html/index.html') //转存 .pipe(gulp.dest('./dist/html')) })
gulp指令
task() 创建gulp任务
参数1 ; 任务的名称
参数2 : 当前任务依赖的其他任务 ['任务1','任务2']
参数3 : 回调函数 当前任务所执行的代码
src() 找到文件的路径
pipe() 管道函数
dest() 文件的转存
watch() 监听
参数1 : 监听哪些文件发生变化
参数2 : 文件变化的时候执行哪些任务 ['任务1','任务2]
监测
扩展src匹配
-
单个文件 : "./src/js/1.js"
-
匹配所有文件 : " * " ./src/*.js src下所有的js文件
-
匹配0个或多个子文件夹 "**"
src/**/*.js src下面的0个或者多个子文件夹里的js文件 -
匹配多个属性 : {}
src/*.{jpg,png,gif} src下面所有的jpg png gif
gulp 拷贝文件
const gulp = require('gulp');
文件的转存 ： 把src/html里面的index.html 转存到 dist/html/
gulp.task('marge',() => {
//文件的转存
//找到文件所在的路径
gulp
.src('./dist/css/*')
//转存
.pipe(gulp.dest('./dist/marge'))
})
gulp 图片的压缩
const imgmin = require('gulp-imagemin');
第一次压缩的命令：cnpm install gulp-imagemin --save-dev
gulp.task('imgMin',() => {
gulp
//路径的查找
.src('./src/images/*.png')
.pipe(imgmin()) //执行压缩
.pipe(gulp.dest('./dist/images'))
})
添加浏览器前缀
npm install --save-dev gulp-autoprefixer
gulp js文件压缩
const jsmin = require('gulp-uglify');
第一次压缩：cnpm install gulp-uglify --save-dev
//js压缩
gulp.task('jsMin',() => {
gulp
.src('./src/js/js/*.js')
.pipe(jsmin()) //js压缩
.pipe(gulp.dest('./dist/js'))
})
gulp css文件压缩
const cssmin = require('gulp-clean-css');
第一次命令：cnpm install gulp-clean-css --save-dev
//css文件的压缩
gulp.task('cssMin',() => {
gulp
.src('./src/css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'))
})
gulp文件的合并
const concat = require('gulp-concat');
第一次命令 : cnpm install gulp-concat --save-dev
//文件的合并
gulp.task('conCat',() => {
gulp
.src('./src/js/js/{demo1,demo2}.js')
.pipe(concat('all.js')) //并的文件的名称
.pipe(jsmin())
.pipe(gulp.dest('./dist/js'))
})
es6转义
es6代码不能直接压缩 要先转义 再压缩
const es6 = require('gulp-babel');
第一次命令 : cnpm install --save-dev gulp-babel @babel/core @babel/preset-env
//es6编译
gulp.task('ES6',() => {
gulp
.src('./src/js/js/demo1.js')
.pipe(es6({
presets: ['@babel/env']
}))
.pipe(gulp.dest('./dist/js'))
})
gulp 添加浏览器前缀
const autofixer = require('gulp-autoprefixer');
第一次命令 : cnpm install gulp-autoprefixer --save-dev
var gulp = require("gulp"); //引入gulp
var autoprefixer = require("gulp-autoprefixer"); //引入插件
//gulp autoFx 自动添加css浏览器兼容前缀，并将添加后的最终.css文档保存在dist文件夹中
gulp.task("autoFx",function(){
gulp.src("*.css")
.pipe(autoprefixer())
.pipe(gulp.dest("dist/"))
})
gulp 开启服务
gulp.task('server',() => {
serverstart.server({
//路径
root : './',
port : 8888,
livereload : true
})
})
npm install --save-dev gulp-webserver
gulp.task('webserver',() => {
gulp.src('./src')
.pipe(webserver({
livereload : true,
proxies:[
{
source : ''
target : ""
}
]
}))
})
出口任务
gulp.task('default',['imgmin','jsmin','cssmin'])
watch封装
gulp.task('ddd',() => {
// return watch('./src/css/style.css',() => {
// gulp.start('cssMin');
// })
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
})
//监听多个文件的变化，执行多个任务
//封装起来
function gulpWatch(src,task){
return watch(src,() => {
gulp.start(task)
})
}