2024年Web前端最全用gulp搭建一个前端项目_gulp建立前端项目(2)，面试常见的问题及答案

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

gulp.src(‘src/script/*.js’)
.pipe(jshint(jshintConfig))
.pipe(jshint.reporter(‘default’));
}) =>
配置.jshintrc文件
{
“undef”: true,
“unused”: true,
“predef”: [ “MY_GLOBAL” ]
} =>
配置package.json文件添加
“jshintConfig”:{
“undef”: true,
“unused”: true,
“predef”: [ “MY_GLOBAL”, “ads” ]
}

**最终gulpfile文件代码：**

var gulp = require(‘gulp’);
var less = require(‘gulp-less’);
var cssnano = require(‘gulp-cssnano’);//css 压缩
var concat = require(‘gulp-concat’);//js合并
var uglify = require(‘gulp-uglify’);//js压缩
var rename = require(‘gulp-rename’);//别名
var jshint = require(‘gulp-jshint’);//语法检查
var packageJSON = require(‘./package’);
var jshintConfig = packageJSON.jshintConfig;
var connect = require(‘gulp-connect’); //自动刷新

jshintConfig.lookup = false;

gulp.task(‘less’,function(){
//gulp.src取一个文件
//pipel里传递一个要执行的操作
//gulp.dest目的地终点
gulp.src(‘src/less/.less’)
.pipe(less())
.pipe(cssnano())
.pipe(gulp.dest(‘build/css’));
});
gulp.task(‘jshint’,function(){
gulp.src('src/script/.js’)
.pipe(jshint(jshintConfig))
.pipe(jshint.reporter(‘default’));
})
gulp.task(‘concat’,function(){
gulp.src(‘src/script/.js’)
.pipe(concat(‘fn-script.js’))//合并后js名
.pipe(uglify())
.pipe(rename(‘fn-script.min.js’))
.pipe(gulp.dest(‘build/script’));
});
gulp.task(‘connect’,function(){
connect.server({
root: ‘./’,
port: 8000,
livereload: true
});
});
gulp.task(‘html’,function(){
gulp.src('src/.html’)
.pipe(connect.reload())
.pipe(gulp.dest(‘build’));

});
gulp.task(‘dish’,function(){
gulp.watch(‘src/less/fn-style.less’,[‘less’]);
gulp.watch(‘src/script/.js’,[‘concat’]);
gulp.watch('src/script/.js’,[‘jshint’]);
gulp.watch(‘src/*.html’,[‘html’]);
});

gulp.task(‘default’,[‘connect’,‘dish’]);

#### **方法二：**


**一、安装与创建**  
 1.安装node：<https://nodejs.org/zh-cn/>


2.安装gulp：npm install gulp -g


3.新建一个文件夹用来存放项目


4.在命令行进入创建的文件夹输入 gulp init即可


5.新建一个gulpfile.js文件配置任务


**二、项目目录介绍**  
![](https://img-blog.csdnimg.cn/20181205174655168.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeXVua3VuODg4,size_16,color_FFFFFF,t_70)


**三、运行与打包**


**在项目根目录打开命令行，输入gulp回车。**


**就会在项目根目录自动生成一个dist目录，扔到服务器即可。**


**在浏览器输入**[http://localhost:8088](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0) **即可浏览项目，如需自动打开浏览器浏览项目**


**把gulpfile.js里面中的**![](https://img-blog.csdnimg.cn/20181205175145688.png)**注释即可**


 


#### **方法三：**


快速搭建gulp项目实战


gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。


正文


#### 1. 安装NodeJS，自行在node官网下载，并安装，通过node-v检查是否安装成功


![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE4MDYvMTE4ODM3OC0yMDE4MDYyOTEyNTQxOTM1Ni0xMjk3NTYzNDkxLnBuZw?x-oss-process=image/format,png)


 2.在此项目中，使用的是cnpm进行安装的，如果想使用cnpm安装，去淘宝镜像安装cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm

#### 2. 安装Gulp环境


1.安装全局环境，运行命令

npm install gulp –g

#### 3. 项目中使用Gulp


     1.创建一个新的文件夹(gulp创建的文件夹)，进行初始化  cnpm init会出现下面内容，并在文件夹中有一个package.json


 ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE4MDYvMTE4ODM3OC0yMDE4MDYyOTEzMDIxNzA3My0xOTY0NDczNjI5LnBuZw?x-oss-process=image/format,png)![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE4MDYvMTE4ODM3OC0yMDE4MDYyOTEzMDIxNzA3My0xOTY0NDczNjI5LnBuZw?x-oss-process=image/format,png)


 2.在命令中运行安装本地Gulp环境

cnpm install gulp --save-dev

3.在本地文件新建文件名为 `gulpfile.js` 文件：　

常用的一些方法
gulp.task 定义任务
gulp.src 找到执行文件
gulp.dest 执行任务的文件去出
gulp.watch 观察文件是否发生变化

4.安装一些常用的压缩包

cnpm install gulp-minify-css gulp-uglify gulp-concat --save-dev

/

1.css压缩 　　gulp-minify-css
2.js压缩　　　gulp-uglify
3.js合并　　　gulp-concat　
4.图片压缩 gulp-imagemin
5.less转化成css gulp-less

5.在文件中新建一个src目录，用于存放你文件，


6.实现一个文件合并，在src下面创建两个html文件



### 最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

*   技术要深入到什么程度？

*   做久了技术总要转型管理？

*   我能做什么，我想做什么？

*   **一技之长，就是深耕你的专业技能，你的专业技术。**（重点）

*   独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

*   拥有事业，选择一份使命，带领团队实现它。（创业）

**一技之长分五个层次**

*   栈内技术 - 是指你的前端专业领域技术

*   栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

*   工程经验 - 是建设专业技术体系的“解决方案”

*   带人做事 - 是对团队协作能力的要求

*   业界发声 - 工作经验总结对外分享，与他人交流



> 永远不要放弃一技之长，它值得你长期`信仰持有`。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> 主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

![](https://img-blog.csdnimg.cn/img_convert/44bc3d1e2743a7cf1e94e28026aedf8d.png)



结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> 主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

![](https://img-blog.csdnimg.cn/img_convert/44bc3d1e2743a7cf1e94e28026aedf8d.png)