gulp 是一个项目开发的自动化打包构建工具
基于 node 环境来运行的
1.cnpm install gulp -g // 全局安装:为了执行gulp任务
2.cnpm install gulp // 本地安装：为了项目文件调用gulp插件的功能
3.gulp -v // 查看版本号，出现版本号即为安装成功
3.项目gulp配置 项目依赖上gulp 项目打包构建安装配置 版本和全局一致 npm install -D glup -D指示开发dev环境 和线上环境不一样 devDependencies 开发环境依赖模块 ：包里建立模块 执行
项目目录 node-modules 依赖包目录 src 项目源码 gulpfile glup 配置文件 package-lock.json 依赖下载版本json文件 package.json 项目管理json文件
4.开始自己创建（新建） gulpfile.js 编译文件 特点：去除换行空格，压缩文件体积内存 文件复制任务 多任务文件执行任务
依据规则模块自动化打包构建
本地安装的gulp引入 gulp css压缩处理 cssmin js压缩处理 gulp-uglify es6->es5 gulp-babel html压缩处理 gulp-htmlmin 清除目录 gulp-clean 内置web服务器 gulp-webserver const sass = require('gulp-sass')(require('sass')) 引入第三方包作用sass文件传成css文件 gulp-sass
5.处理第三方文件和图片之类等信息 -不用压缩直接打包转到新目录 创建一个lib任务 创建一个static任务
直接运行 gulp就可以直接运行整个项目
6.修改内容自动刷新 创建一个watch任务 改写default任务 修改后运行 gulp自动打包编译
7.使用第三方包文件依赖 需要执行命令 npm i -D gulp-sass 开发 npm i sass 线上 然后再引入他们的依赖文件模块 gulp-sass 和sass
需要看看package.json项目管理文件里配置文件安装的依赖包和版本号是否完齐全 核心gulpfile.js项目目录执行自动化配置文件
1 /**
2 * 1. 创建项目目录结构
3 * cart-project
4 * -|src
5 * -|css
6 * -|js
7 * -|pages
8 *
9 * 2. 初始化项目
10 * npm init -y
11 * cart-project
12 * -|src
13 * -|css
14 * -|js
15 * -|pages
16 * -|pagckage.json
17 * 3. 本地安装gulp
18 * npm i gulp
19 *
20 * 4. 配置文件gulpfile.js
21 * 4.1 写任务
22 */
23 const gulp = require('gulp') //引入本地安装的gulp
24 const cssmin = require('gulp-cssmin') //css压缩处理
25 const uglify = require('gulp-uglify') //js压缩处理
26 const babel = require('gulp-babel') //es6->es5
27 const htmlmin = require('gulp-htmlmin') //html压缩处理
28 const clean = require('gulp-clean') //清除目录
29 const webserver = require('gulp-webserver') //内置web服务器
30
31 // const sa = require('sass')
32 // const gulpSass = require('gulp-sass')
33 // const sass = gulpSass(sa)
34
35 const sass = require('gulp-sass')(require('sass')) // 引入第三方包作用sass文件传成css文件
36
37
38 /**
39 * css打包任务
40 * 压缩处理 第三方包 cssmin
41 */
42 gulp.task('css', function () {
43 return gulp.src('./src/css/**')
44 .pipe(cssmin())
45 .pipe(gulp.dest('./dist/css/'))
46 })
47
48
49 /**
50 * sass打包任务
51 * 1. sass->css
52 * 2. 压缩
53 *
54 */
55 gulp.task('sass', function () {
56 return gulp.src('./src/sass/**') //读取文件流
57 .pipe(sass()) // sass文件流转到css文件流
58 .pipe(cssmin()) //css文件压缩处理
59 .pipe(gulp.dest('./dist/css/')) //写入dist/css目录
60 })
61
62
63 /**
64 * js打包任务
65 * 1. 压缩js代码
66 * 2. es6最新语法转成es5语法
67 * ()=>{} function(){}
68 * class A function A(){}
69 * let const -> var
70 */
71 gulp.task('js',function(){
72 return gulp.src('./src/js/**')
73 .pipe(babel({
74 presets:['es2015']
75 }))
76 .pipe(uglify())
77 .pipe(gulp.dest('./dist/js/'))
78 })
79
80 /**
81 * html打包任务
82 * 1. 压缩html代码
83 */
84 gulp.task('html',function(){
85 return gulp.src('./src/pages/**')
86 .pipe(htmlmin({
87 removeEmptyAttributes:true,
88 collapseWhitespace:true
89 }))
90 .pipe(gulp.dest('./dist/pages/'))
91 })
92
93 /**
94 * lib和static打包
95 */
96 gulp.task('lib',function(){
97 return gulp.src('./src/lib/**')
98 .pipe(gulp.dest('./dist/lib/'))
99 })
100 gulp.task('static',function(){
101 return gulp.src('./src/static/**')
102 .pipe(gulp.dest('./dist/static/'))
103 })
104
105
106 /**
107 * 清除dist目录任务
108 */
109 gulp.task('clean', function(){
110 return gulp.src('./dist',{allowEmpty:true})
111 .pipe(clean())
112 })
113
114 /**
115 * 启动webserver
116 */
117 gulp.task('webserver',function(){
118 return gulp.src('./dist')
119 .pipe(webserver({
120 host:'localhost',
121 port:3000,
122 livereload:true,
123 open:'./pages/index.html'
124 }))
125 })
126
127 /**
128 * 监听所有文件变化任务
129 */
130 gulp.task('watch',function(){
131 gulp.watch('./src/css/**',gulp.parallel('css'))
132 gulp.watch('./src/js/**',gulp.parallel('js'))
133 gulp.watch('./src/sass/**',gulp.parallel('sass'))
134 gulp.watch('./src/pages/**',gulp.parallel('html'))
135 gulp.watch('./src/static/**',gulp.parallel('static'))
136 gulp.watch('./src/lib/**',gulp.parallel('lib'))
137 })
138
139
140 /**
141 * 顺序执行所有任务
142 */
143 gulp.task('mytask',gulp.series('sass','css','js','html','static','lib'))
144
145 /**
146 * 定义一个默认任务
147 * exports.default暴露一个默认任务
148 根目录下可执行运行默认任务，通过 gulp 命令
149 */
150 // exports.default = gulp.series('sass','css','js','html','static','lib')
151 // exports.default = gulp.parallel('clean','sass','css','js','html','static','lib')
152 exports.default = gulp.series(
153 'clean',
154 gulp.parallel('sass','css','js','html','static','lib'),
155 'webserver',
156 'watch')
gulp完整依赖配置gulpfile,js