使用gulp搭建前端构建工具

_Zhao 发布于2019-08-20 15:45 / 2761人阅读

摘要：今天跟大家分享的是关于目前自己的公司的项目优化中所使用到的构建工具。在进行基础巩固的基础上，使用构建工具可以在开发的过程中进行部分自动化构建，如对页面的监听，对样式的编译，对代码的压缩与打包。在使用之前，要先对所需要的依赖进行安装。

Why？

今天跟大家分享的是关于目前自己的公司的项目优化中所使用到的gulp构建工具。目前公司对产品的优化决定采用VueJs来进行单页面开发，无疑这种新的技术框架对一个项目的效率会提升得更快更强。如今前端的发展速度飞快，仿佛稍微停止学习的脚步就会被时代抛弃，但我们也切忌过于急躁，所谓万卷不离其宗，打好基础是关键。

What？

在进行基础巩固的基础上，使用gulp构建工具可以在开发的过程中进行部分自动化构建，如对页面的监听，对样式的编译，对代码的压缩与打包。
作为一个小型的项目来说，这些基本就足够了。
搭建gulp最主要的是使用gulp的工作流，通过在gulp中的gulpfile文件编写我们的工作流，就仿佛一个个车间，在我们一条条命令下，就能完成我们需要的工作。

How？

1.安装NodeJs

首先，最基本也最重要的是，我们需要搭建node环境。访问http://nodejs.org，下载完成后直接运行程序，就一切准备就绪。npm会随着安装包一起安装。
为了确保Node已经正确安装，我们执行几个命令。

node -v

如果正确安装的话，你会看到所安装的Node的版本号，接下来看看npm。

npm -v

这同样能得到npm的版本号。
如果这两行命令没有得到返回，可能node就没有安装正确，尝试重启下命令行工具，如果还不行的话，只能回到第一步进行重装。
安装成功后我们就可以在目标目录中初始化环境

npm init

使用上述代码在项目空间中初始化环境，按步骤填写后会生成package.json文件

2.安装gulp

使用npm工具下载gulp。在命令行中输入

sudo npm install -g gulp

使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

gulp -v

接下来，我们需要将gulp安装到项目本地

npm install —-save-dev gulp

这里，我们使用—-save-dev来更新package.json文件，更新devDependencies值，以表明项目需要依赖gulp。
Dependencies可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系，想要更加深入的了解它可以看看package.json文档。

3.gulpfile文档编写

在这里使用我在项目中使用的gulpfile文件。

// 引入 gulp
var gulp = require("gulp");

// 引入组件
var jshint = require("gulp-jshint"); //语法检查
var sass = require("gulp-sass"); //sass编译
var concat = require("gulp-concat"); //合并
var uglify = require("gulp-uglify"); //js压缩
var rename = require("gulp-rename"); //重命名
var htmlmin = require("gulp-htmlmin"); //页面压缩
var minifyCss = require("gulp-minify-css"); //css压缩
var rev = require("gulp-rev"); //对文件名加MD5后缀
var revCollector = require("gulp-rev-collector"); //路径替换
var cheerio = require("gulp-cheerio"); //替换引用


// 默认任务 
gulp.task("default", ["sass", "lint"]);
// 开发环境gulp任务
gulp.task("watch", function() {
    // gulp.watch("./src/index.html", ["sass", "lint"]);
    gulp.watch("./src/scss/*.scss", ["sass"]);
    gulp.watch("./src/js/*.js", ["lint"]);
});
// 检查脚本 
gulp.task("lint", function() {
    gulp.src("./src/js/*.js")
        .pipe(jshint())
        .pipe(jshint.reporter("default"));
});
// 编译Sass 
gulp.task("sass", function() {
    gulp.src("./src/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./src/css"));
});



// // 生产环境gulp任务
gulp.task("dev", ["cssConcat", "scripts"]);
// js合并，压缩文件 
gulp.task("scripts", function() {
    gulp.src("./src/js/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("./dist/js"))
        .pipe(rename("all.min.js"))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest("./dist/js"))
        .pipe(rev.manifest({merge: true}))
        .pipe(gulp.dest("./rev/js/"));
});
// css合并压缩
gulp.task("cssConcat", function() {
    gulp.src("./src/css/**.css")
        .pipe(concat("style.min.css"))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest("./dist/css"))
        .pipe(rev.manifest({merge: true}))
        .pipe(gulp.dest("./rev/css/"));
});
//改变引用文件
gulp.task("rev", function() {
    gulp.src(["./rev/css/rev-manifest.json", "./rev/js/rev-manifest.json", "./dist/index.html"])
        .pipe(revCollector()) 
        .pipe(gulp.dest("./dist/"));
});
gulp.task("indexHtml", function() {
    return gulp.src("index.html")
        .pipe(cheerio(function ($) {
            $("script").remove();
            $("link").remove();
            $("body").append("");
            $("head").append("");
        }))
        .pipe(gulp.dest("dist/"));
});
//压缩html文件
gulp.task("minify", function() {
    return gulp.src("dist/*.html")
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest("./dist/"));
});

基本上在这样的工作流程中，代码的压缩合并，监听发布都可以使用gulp流来控制。
在使用gulpfile之前，要先对所需要的依赖进行安装。使用npm对依赖进行下载，这里下载的就是文件中所require引用的依赖，这里就不将全部写下来了。

npm i gulp-jshint --save-dev

gulp的工作流程十分简单，主要用task，run，watch，dest来进行任务搭建。

task主要作为任务的新建，即像我文件中所写的

run起运行任务的命令

watch起监听命令，作为对工程中文件的变化起监听作用，这一点如果再搭配页面重加载效果，即gulp-connect依赖，则可以实现页面无需手动刷新操作

dest主要是对文件的路径进行更改

更多详细的可以参考gulp的官网。熟悉了就赶紧尝试起来吧，趁年轻，大胆试错。

Next？

下一次的分享可能会收集在论坛上所了解到的一些我经常在项目中看见的代码，同时也是作为自己一个技术积累，与大家一起学习。CU tomorrow

Finished

我的技术博客主要以github上创建的一个仓库为主，因为前端论坛太多了，我无从下手，所以一般都会先在github上整理完后再分发到各个社区，有兴趣请戳
☛ MolyCHNs Blogger

GPU云服务器云服务器使用webrtc搭建前端视频聊天室前端构建构建工具 android构建工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82469.html

NodeJS+Express搭建个人博客-gulp自动化构建工具使用（二）

摘要：自动化构建工具使用简言现在不管是做前端还是后端的，不可避免的是要跟打交道的而且这么容易开发难道我们不想自己随手写点什么这类比较前卫的框架早就深度集成了很多前端的东西现在，就让我们手动为也插上的翅膀吧。 gulp自动化构建工具使用简言现在不管是做前端还是后端的，不可避免的是要跟html打交道的；而且Node这么容易开发web；难道我们不想自己随手写点什么？Express这类比较前卫的...

Yangder 2019-06-26 17:47 评论0 收藏0
用gulp+mock实现前后端分离

摘要：当然需要的工具不只有这些，其他的一些可选工具还有文件压缩压缩时用到的文件重命名检查一般编辑器自带校验提示工具等等，具体根据项目需要安装。 gulp 前端自动化构建工具需要配置nodejs环境, 利用npm安装全局gulp,安装后可以输入gulp指令。 npm install gulp -g 创建项目目录、初始化npm包、gulp npm init gulp init 下载gul...

dailybird 2019-08-20 18:08 评论0 收藏0
个人博客主页搭建随笔

摘要：博主目前的这个项目还不算很大，模块依赖简单，但期望完成诸如版本号替换，压缩代码，合并文件，发布到服务器等和模块化关系不大的工作，所以使用了。同时，对和附加缓存，配合和版本号实现服务器更新，这一部分其实已经帮我们实现好了。经常在各种论坛、博客还有 github 上活跃的朋友不难发现，许多大牛都有自己的网站，也多以博客为主。博主作为一个立志前端的大白，难道不应该和大牛学习么？说干就干，前...

whjin 2019-08-02 16:04 评论0 收藏0
个人博客主页搭建随笔

摘要：博主目前的这个项目还不算很大，模块依赖简单，但期望完成诸如版本号替换，压缩代码，合并文件，发布到服务器等和模块化关系不大的工作，所以使用了。同时，对和附加缓存，配合和版本号实现服务器更新，这一部分其实已经帮我们实现好了。经常在各种论坛、博客还有 github 上活跃的朋友不难发现，许多大牛都有自己的网站，也多以博客为主。博主作为一个立志前端的大白，难道不应该和大牛学习么？说干就干，前...

cnio 2019-08-23 11:54 评论0 收藏0
使用 Gulp 自动化构建工具快速搭建项目

摘要：通过本文，我们将学习如何使用来改变开发流程，从而使开发更加快速高效。中文网站详细入门教程使用是基于的，需要要安装为了确保依赖环境正确，我们先执行几个简单的命令检查。详尽使用参见官方文档，中文文档项目地址为了UED前端团队更好的协作开发同时提高项目编码质量，我们需要将Web前端使用工程化方式构建；目前需要一些简单的功能： 1. 压缩HTML 2. 检查JS 3. 编译SA...

glumes 2019-08-20 15:57 评论0 收藏0