[笔记] 使用 Gulp 进行网页前端自动化 – Gulp 和 Bower 串接

Gulp 搭配上 Bower 和 Bootstrap 4 前端套件,可以快速的做到前端样板管理。不过 Gulp 4 和前一版的作法有些不同,这边笔记一下串接的方法。
gulp logo


串接上 Bower

1. Bower 是一套前端套件的管理工具,虽然说是很方便,但 Bootstrap 4 的新版本已经不支援。在这样的情况下,会需要使用 npm 安装,再运用打包到前端。
2. 搭配套件有 main-bower-files , 这是自动化工具用来浏览 bower.json 下的套件。
3. 需要先安装 bower (npm i -g bower),再来在目标资料夹下使用 bower init (产生 bower.json),再来运用 bower 指令下载你需要用到的前端工具包(像是 jQuery)

加上 Bootstrap 4

1. 需要运用 npm 安装,然后再 gulp 指令中导入。
2. 其中的 css 部分,可以运用 sass 的 import 特性,用像是 @import “../../node_modules/bootstrap/scss/bootstrap.scss”; 来让其编译时载入即可。


程式码


参考课程

Course 21 ~ Course 24 (全部一共有 48 Courses)

请注意:本系列文章为个人对应课程的消化吸收后,所整理出来的内容。换言之,并不一定会包含全部的课程内容,也有可能会添加其他资源来说明。课程连结网址:http://tinyurl.com/y9fp69lb


相关文章

[blogimove-CPC-TAG=hexSchoolGulpIntro-MODE=3]

按赞加入粉丝团

延伸阅读

GA浏览人气:27