gulp两种配置方式总结(1)，成功收获美团，小米offer

2401_83739434

于 2024-04-03 00:29:17 发布

阅读量991

点赞数 9

分类专栏： 2024年程序员学习文章标签： gulp node.js 前端

本文链接：https://blog.csdn.net/2401_83739434/article/details/137303334

版权

2024年程序员学习专栏收录该内容

284 篇文章 0 订阅

订阅专栏

因为gulp利用Node.js流的威力，可以快速构建项目并减少频繁的IO操作；

可以理解为：每个文件或一堆文件，他们合在一起，读取出来，就像水一样流向最终的目标；任务就像水管中的一个个的过滤器，这样可以减少频繁的IO操作，只需要一个个的过下过滤器，最终输出出来；可以更快速的构建前端代码；

开发项目之前，目录结构说明

bower_components //前端包管理器

build // 构建代码之后

dist // 产品发布的目录：部署和发布

node_modules //后台包管理器

src //源码所存放的目录

.eslintrc //eslintrc 配置文件，校验JS语法风格

.gitignore//忽略文件

gulpfile.js //gulp配置文件

package.json //配置项目依赖

#自动化构建工具 gulp

优点：

基于流，任务化

可以对我们写完的项目进行自动打包处理

压缩

合并

增加版本号

常用API：src 读,dest 写,watch 监控,task 定制任务,pipe 用流的方式处理

基本命令

npm init -y

npm i -g gulp

npm i gulp --save-dev

安装gulp插件

gulp

gulp-clean //执行任务前先删除一次build目录

gulp-concat //使用gulp-concat合并javascript文件,减少网络请求

gulp-connect //浏览器自动刷新

gulp-cssmin //压缩css文件

gulp-imagemin //压缩图片

gulp-less //将less文件编译成css

gulp-load-plugins //可以加载package.json文件中所有的gulp模块。避免一个个手动加载的问题；

gulp-uglify //压缩javascript文件,减小文件大小

open

编写任务

lib

html

json

less

image

clean

reload

watch

编写配置文件

引入必要的模块；并配置gulpfile.js

var gulp=require(‘gulp’);

var = r e q u i r e ( ′ g u l p − l o a d − p l u g i n s ′ ) ( ) ; / / 我们其他 g u l p 模块都可以直接用 =require('gulp-load-plugins')();//我们其他gulp模块都可以直接用 =require(′gulp−load−plugins′)();//我们其他gulp模块都可以直接用引入，不需要声明变量了

var open=require(‘open’); //open单独引入，因为他没有以gulp开头

//app：用来定义目录路径；

var app={

srcPath:‘src/’,//源代码目录

devPath:‘build/’,//开发目录，整合之后的文件

prdPath:‘dist/’//生产上线目录，生产和部署

};

//拷贝文件：拷贝第三方文件到开发和生产目录；

gulp.task(‘lib’,function () {

gulp.src(‘bower_components//*.js’)///_：对当前bower_components下所有文件，进行深度遍历；同时读取所有文件

.pipe(gulp.dest(app.devPath+‘vendor’)) //拷贝到开发，并重命名

.pipe(gulp.dest(app.prdPath+‘vendor’)) //拷贝到生产目录；

.pipe(KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 51: …级浏览器支持IE9及9以上； }̲); //拷贝html gul….connect.reload())

})

//json

gulp.task(‘json’,function () {

gulp.src(app.srcPath+’/data/**/_.json’)

.pipe(gulp.dest(app.devPath+‘data’))

.pipe(gulp.dest(app.prdPath+‘data’))

.pipe(KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 20: …nect.reload()) }̲) //以下任务会有变化 //….less())

.pipe(gulp.dest(app.devPath+‘css’))

.pipe( . c s s m i n ( ) ) / / 运用生产环境之前，先压缩下； . p i p e ( g u l p . d e s t ( a p p . p r d P a t h + ′ c s s ′ ) ) . p i p e ( .cssmin()) //运用生产环境之前，先压缩下； .pipe(gulp.dest(app.prdPath+'css')) .pipe( .cssmin())//运用生产环境之前，先压缩下；.pipe(gulp.dest(app.prdPath+′css′)).pipe(.connect.reload())

})

//js

gulp.task(‘js’,function () {

gulp.src(app.srcPath+‘scripts/**/*.js’)

.pipe( . c o n c a t ( ′ i n d e x . j s ′ ) ) / / 进行 J S 代码合并；合并后到开发环境 . p i p e ( g u l p . d e s t ( a p p . d e v P a t h + ′ j s ′ ) ) . p i p e ( .concat('index.js')) //进行JS代码合并；合并后到开发环境 .pipe(gulp.dest(app.devPath+'js')) .pipe( .concat(′index.js′))//进行JS代码合并；合并后到开发环境.pipe(gulp.dest(app.devPath+′js′)).pipe(.uglify()) //压缩后，再发布到生产环境

.pipe(gulp.dest(app.prdPath+‘js’))

.pipe(KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 20: …nect.reload()) }̲) //image gulp.….imagemin())

.pipe(gulp.dest(app.prdPath+‘image’))

.pipe(KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 20: …nect.reload()) }̲) //以上就完成静态资源文件….clean())

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。