标签：node src pipe sass js gulp 打包 css
gulp 是一个项目开发的自动化打包构建工具
基于 node 环境来运行的
1.cnpm install gulp -g // 全局安装:为了执行gulp任务
2.cnpm install gulp // 本地安装：为了项目文件调用gulp插件的功能
3.gulp -v // 查看版本号，出现版本号即为安装成功
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
标签：node,src,pipe,sass,js,gulp,打包,css 来源： https://www.cnblogs.com/cc-font/p/15619421.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。