- A+
所属分类：Web前端
gulp 是一个项目开发的自动化打包构建工具
基于 node 环境来运行的
1.cnpm install gulp -g // 全局安装:为了执行gulp任务
2.cnpm install gulp // 本地安装：为了项目文件调用gulp插件的功能
3.gulp -v // 查看版本号，出现版本号即为安装成功
安装包 -D参数开发dev环境依赖
没有-D直接下载是线上环境依赖
在上传文件时会删除依赖包项目，node_modules文件体积太多，用时直接下载不用时可以删除
1.有创建项目文件
先命令全局gulp依赖 在node环境依赖
使用npm 安装全局依赖 gulp
npm install --global gulp
2.初始化依赖
npm init -y
后项目目录
src
package.json （包）
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
