自动化前端项目构建

时间  2019-11-12
标签 自动化 前端 项目 构建 栏目 测试自动化 繁體版
原文   原文链接

一、建立项目

无论作什么开发，咱们都应该遵循必定的规范，建立项目一样要注意文件夹的名字和结构。首先建立一个以下的基础项目结构，暂且就将项目命名为 auto-web：javascript

awesomes-cn

简单解释一下：css

  • /src 源文件所在地。开发过程当中的各类CSS和JS源文件都往这里面放。
  • /dist 目标文件所在地。上线前经过工具生成的CSS和JS目标文件都输出到这里。
  • /images 图片文件。
  • /vendor 第三方的 CSS、JS 和字体文件都存放到这里。
  • /views HTML 视图文件。

固然目前咱们是手动建立的，能够设想一下，利用NodeJS，咱们是彻底能够作到一条命令建立出这样的文件夹结构。html

二、从 index.html 开始

首先咱们习惯性地建立一个 index.html 页面前端

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello world</title> </head> <body> <h2>这是个人我的主页</h2> </body> </html>

三、 Jade

什么是 Jade ? - Jade 是 Node 的一个模板引擎，一句话就是让咱们可以更快更简便地写HTML，你们能够去 Jade 的 官网，因为其主要是靠缩进来定义结构，因此通常都可以很快地学会这种写法。java

相似的模板引擎在 Rails 里面也有一个叫 Slim 。固然有不少开发者是不喜欢用相似的方式去开发，不过咱们这里仅做为一个示例，具体用仍是不用取决于你本身。node

OK，我们来将 index.html 换成 Jade。git

首先，我们在 /views 文件夹下建立一个 index.jade 文件，而后输入下面的内容：程序员

doctype html html head meta(charset="utf-8") title Hello world body h2 这是个人我的主页

这和上面的 index.html 是彻底同样的。那么咱们能够对比一块儿两种写法：github

awesomes-cn

在 HTML 代码量越大的状况下，Jade 的写法就越有优点了。固然仍是那句话，用与不用都取决于你本身的爱好。web

OK，到此为止，咱们已经写好了一个 HTML的模板引擎。

直接点击 index.jade 能运行吗？确定是不行的。在这里我得强调一下，咱们所要作的额外的工做，不是为了运行项目，而是为了开发项目。就比如咱们都要去北京，只不过你是走路去的，而我是坐飞机去的，目的一致，优化了开发流程而已。

明白了这一点，咱们就知道，应该将 index.jade 转换成 index.html 了。

该如何转换呢？这必然得用上工具了，我们须要一门后台语言的命令行工具，Ruby？Python？ 对，他们都能完成这份工做。但咱们是前端，天然最佳选择就是 NodeJS 了。

四、该 NodeJS 出场了

相信你们也都对 NodeJS 有过必定的了解，我们先不要求精通，只要知道怎么使用便可。

首先我们去 NPM 中查找要用到的 jade 包，找到 mmand Line 命令行，首先按照文档说的安装（必要时前面加上 sudo）：

$ npm install jade -g

这里的 npm 是 Node 的一个包管理器，也就是经过相似上面的命令去安装程序中须要用到的包。

而后经过 jade --help 能够看到如何将一个 Jade 文件转换成 HTML：

jade views/index.jade -o ./

这样就能在咱们的项目根目录下生成一个 index.html 了，并且它的内容是压缩过的。

好像还不错，我们能够书写 *.jade 文件，而后经过命令生成 *.html 。

五、母版页

网站不可能只有一个页面，可是咱们确定会有公共的头部和底部，不可能每一个页面都去写一遍。

有两种方式达到这种目的，一种是母版页，经过占位符和填坑的方式实现，也就是接下来咱们要讲的。还有一种是在每一个页面中去引入公共部分。固然得根据本身的须要来决定了。

首先咱们在 views/ 下建立一个 layouts/layout.jade 母版页：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
  body
    header
      | 这是头部

    block con

    footer
      | 这是底部

注意这里的 block con 是关键，意思是建立一个标识为 con 的坑，等着其它具体页面来填内容。

那么该怎么填内容呢？咱们来改写views/index.jade 文件

extends ./layouts/layout.jade

block con
  div 这是主页

首先是经过 extends 引入模板文件，而后再在 block con 下面去填充首页的具体内容。

这样，之后添加任何新页面均可以经过上面的格式来了，不用去管公共部分。

六、该写 CSS 了

页面没有样式是不行的，那么咱们接下来就来写样式文件。不过咱们这里但愿用 Sass 来写。

Sass 是一个 CSS 预处理器，简单点说就是用另一种方式去书写 CSS（增长了包括变量、嵌套等等新写法），最终一样经过工具转换成原始的 CSS文件。不了解的同窗能够大体看一下 官网，也都是很容易学会的。

好了，我们在 /src/sass 中建立一个 main.scss 文件：

body{ background-color: #EEE; h2{color: Red} }

做为演示，我们这只用到了其中的嵌套规则。

上面说到，*.scss 也是不能直接引用的，须要先转换成 *.css。怎么转换呢？首先仍是安装 Sass：

npm install sass -g

而后执行下面的命令将 /src/main.scss 输出到 /dist/css/main.css 中

sass src/sass/main.scss dist/css/main.css

你们能够看到，在 /dist/css/ 中实际上生成了 main.css 和 main.css.map 两个文件，固然我们能够不用管 main.css.map 这个文件，由于我也没去看到底这个文件有什么做用。

OK，大功告成。接下来咱们就在 views/layouts/layout.jade 中将 main.css 引入。

修改 views/layouts/layout.jade：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
    link(href="dist/css/main.css" rel="stylesheet") 
  body
    header
      | 这是头部

    block con

    footer
      | 这是底部

而后从新执行

jade views/index.jade -o ./

打开新生成的 index.html 文件，是否是应用上了咱们的样式了？

七、该写 JavaScript 了

一样滴，JavaScript 也有本身的预处理，那就是 CoffeeScript 了。这样你就能够写 JavaScript 写得很爽了。不了解的同窗能够看看 教程 很简单。

相似上面的 CSS，首先在 src/coffee 下建立一个 main.coffee 文件，而后写上测试代码：

hello = ()->
  console.log("your coffee is work")
hello()

而后

npm install -g coffee-script

接着编译 src/*.coffee 到 dist/js/*.js：

coffee -c -o  src/coffee/main.coffee dist/js/

这里在测试中好像是不能输出来的，不过文档是这样写的，先不用管这个，暂时能够直接将其编译到当前目录下，而后手动复制到 dist/js/*.js 下面：

coffee -c   src/coffee/

接下来咱们就在 views/layouts/layout.jade 中将 main.js 引入。 修改views/layouts/layout.jade：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
    link(href="dist/css/main.css" rel="stylesheet") 
    script(src="dist/js/main.js")
  body
    header
      | 这是头部

    block con

    footer
      | 这是底部

而后从新执行

jade views/index.jade -o ./

打开新生成的 index.html 文件，F12看看是否是输出了 your coffee is work。

八、该创做了

估计不少同窗都想利用 Github 我的主页（下面会讲到）来写博客，若是是有后台程序，那么通常是将博客内容存到数据库中，而后在一个指定的页面中读取显示出来。

那么全静态站点该如何作呢？咱们没有数据库。的确，可是咱们仍然能够把博客内容剥离出来，放到一个单独的文件中，而后经过命令去生成单个的博客页面。

这里咱们使用 Markdown 格式来写内容，咱们新建一个文件夹 views/blog/ 文件夹用于存放全部博客文件。首先咱们新建一个 views/blog/index.jade 的页面用于显示文章：

extends ../layouts/layout.jade

block con
  article
    include:marked hello.md

注意这里是经过 include:marked 指令来将 Markdown 文件引进来并解析成 HTML，这是 Jade 为咱们提供的功能。

而后建立一个 hello.md 的文章：

### 这是标题
这是内容
[连接文字](连接地址)

最后就会生成一个 blog/index.html。

这里咱们是把 include:marked hello.md 写死了，事实上咱们是要实如今 views/blog/ 下添加不少的 Markdown 格式的博客内容文件，而后执行 gulp 便可在 blog/下面生成对应的 HTML 文件。

你们能够思考一下这个问题，我这里就不作了，也许会在后面的文章中来进行补充。

到此为止，整个项目已经初具成效了。

那么咱们每次修改内容的时候，都得去执行相应的命令，是否是有点繁琐呢？程序员必定要懒，能程序作的就别本身手动去作。那么有这种工具能够帮咱们完成这一系列动做吗？

九、自动化构建

所谓的自动化构建就是将多个开发中的操做整理到一块儿，简化咱们的整个开发过程。简单点说就是配置一系列的命令语句，而后一行命令就搞定全部的CSS、JavaScript等处理工做。

固然构建工具的选择仍是蛮多的（查看 完整列表）。这里咱们选择的是 gulp，由于使用和配置都比较简单。

首先是安装 gulp

npm install --global gulp

而后在你的项目根目录下建立一个 gulpfile.js 文件，内容以下：

var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task here });

而后执行

gulp

能够看到默认的任务执行了，只是没有作任何工做：

[14:18:31] Starting 'default'... [14:18:31] Finished 'default' after 79 μs

下面咱们就来配置 gulp 来完成咱们的自动化任务，这里我们先以编译 Sass 文件做为示例。

首先得引入 Sass 的处理包，注意这里再也不是 sass ，而是 gulp 的 Sass 插件，能够在 npm 上面找到（点击这里）而后咱们能够看看它的大体用法。

首先是引入：

var sass = require('gulp-sass');

而后是建立一个任务：

gulp.task('styles',function(){ gulp.src('./src/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./dist/css')) })

这里咱们经过 src 指定 *.scss 源文件的位置，而后传入 pipe（自动化流程中的处理管道）最后经过 dest 指定输出路径。整个过程实际上是很好理解的。

完了你的 gulpfile.js 文件就会是这个样子：

var gulp = require('gulp'), sass = require('gulp-sass'); gulp.task('styles',function(){ gulp.src('./src/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./dist/css')) })

接下来一样须要安装 gulp-sass

npm install -g gulp-sass

最后，咱们执行

gulp

能够看到，Sass 文件已经编译成功了。

对于 coffee 和 jade 文件，咱们一样建立各自的任务和处理管道，这里就不重复说了，能够直接看代码。

这里还有一个 clean 任务，用于每次新编译的时候把老文件清空掉

gulp.task('clean',function(cb){ del(['./dist'],cb) })

由于执行 gulp 命令默认是取的 default 任务，因此咱们须要建立该任务，并把其它任务都给加进去

gulp.task('default',['clean'],function(){ gulp.start('styles','scripts','templates'); })

能够看到这里是保证在 clean 任执行完成后再去执行咱们的 'styles','scripts','templates'任务。

在实际的开发过程当中，无论咱们修改什么文件，只须要 gulp 一下便可，方便了不少。可是仍然每次修改都得执行一下。可不可让 gulp 来监听咱们的文件变化，而后自动从新执行编译任务呢？

答案是能够的。只须要将这些任务加入监控 watch 就好了：

gulp.task('watch',function(){ gulp.watch('./src/sass/*.scss',['styles']); gulp.watch('./src/coffee/*.coffee',['scripts']); gulp.watch('./views/*.jade',['templates']); })

而后执行

gulp watch

这样，gulp 就开始监听文件了，无论咱们作了什么修改，都不用再次执行 gulp 了。

源码 中我用到了更多的包（压缩、合并、重命名等等）你们能够了解一下，不懂的能够去 npm 上查一下用法文档。

十、开发环境

若是要是在别人的环境中运行该项目，那么咱们以前安装的包都得从新安装一遍，是否是很麻烦。别怕，咱们有 package.json，用来管理咱们这些包的依赖，换了环境只须要执行一下 npm install 便可将咱们以前的包都给安装上了，至关省事。

须要手动建立 package.json 吗？NO，只需执行

npm init

接下来咱们就能够按照提示建立本身的 package.json 了。 里面包含了该项目的一些信息，我们找到 dependencies 这一行，这即是该项目要用到的包。正常状况下应该是这种格式：

"dependencies": { "gulp": "^3.9.0", "gulp-sass": "~2.0.4", .... }

可是很遗憾，里面什么都没有，这意味着咱们必须一个个手动往里面添加咱们上面用到的包了。

心好累...

难道就不能自动给咱们加上去吗？不能，不过咱们若是在开始安装每一个包的时候在命令结尾加上 -save 参数，那么后面这些依赖即可以自动加到 dependencies 下了，如：

npm install coffee-script -save

因此下次开发的时候，别忘了在安装包的时候加上这个参数。

十一、版本控制

如今项目已经完成了，咱们应该将它归入版本控制了。什么叫版本控制呢？通俗点说就是充分管理你的代码日志，你对代码作的任何增删改，只要你提交过，就会记录下来，并且能够随时回退到以前的任何状态，从而保证整个开发过程不会断层。

目前咱们基本上都会使用Git来完成版本控制，Git只是一种协议，而具体则有Github、Bitbucket、Gitlab之类的实现。而 Github 则是开源项目的不二选择。

一、首先咱们在项目根目录下执行
git init

这里是初始化，会建立一个 .git 文件夹，里面包含了全部跟版本控制相关的数据。因此，若是你想把该项目和Git断开，直接删除该文件夹便可。

二、添加一个 README.md （可选）用于描述项目
touch README.md

注意这里是 Markdown 格式的。

三、忽略某些文件

在提交代码以前，咱们须要将某些文件排除在外，好比由 npm 产生的 node_modules 文件夹，这是开发环境下用到的，能够经过 npm install 在新环境下安装依赖。因此理应不归入版本管理，还有缓存之类的都应该排除掉。

那么咱们就建立一个名为 .gitignore 的文件，内容就以下：

.DS_Store
node_modules
.sass-cache

上面只是一个大体的内容，实际开发的时候你得根据本身的需求去忽略某些文件。

四、提交代码到本地
git add . git commit -m "init project"

注意，这里仅仅是将代码提交到了本地。

五、提交到 Github

首先咱们在Github上建立一个项目 auto-web

awesomes-cn

Create repository 到下一个页面上，复制那句

git remote add origin git@github.com:awesomes-cn/auto-web.git

（这里是个人，你得复制你本身的） 而后回到项目根目录执行该命令。

最后执行提交

git push -u origin master

去你的 Github 上，能够看到该项目的全部文件已经传上去了，而那些忽略掉的文件则没有上去。

感兴趣的同窗能够 cat .git/config 一下：

[core] repositoryformatversion = 0 filemode = true bare = false logallrefupdates = true [remote "origin"] url = git@github.com:awesomes-cn/auto-web.git fetch = +refs/heads/*:refs/remotes/origin/* [branch "master"] remote = origin merge = refs/heads/master

这就是本地与远程链接的一个配置，由 remote 和 branch 组成，即经过【远端源+分支】来精肯定位到最终提交的地址。若是咱们直接修改这个文件，也会和用命令同样达到相同的配置效果。

起初是没有这些内容的，当咱们执行 git remote add origin ... 时则添加了

[remote "origin"] url = git@github.com:awesomes-cn/auto-web.git fetch = +refs/heads/*:refs/remotes/origin/*

而 git push -u origin master 则指定了

[branch "master"] remote = origin merge = refs/heads/master

因此若是只有 master 分支，后面的提交就直接能够 git push 了。

若是这是你在公司作的，回到家了想继续开发，只需

git clone git@github.com:awesomes-cn/auto-web.git

而后

cd auto-web npm install gulp watch

开发环境就绪，继续吧....

免费我的主页

若是你想把该项目做为一个我的主页项目，也就是直接浏览静态页面。Github 给每一个用户提供了一个特殊的库，那就是 <github用户名>.github.io ，由于这个项目是能够直接在浏览器中浏览的。通常的前端库都会将文档页面或者演示页面放到该主页上，这样就不必本身搭服务器来作了。

那么很简单，只须要把该项目的名字改为 <github用户名>.github.io 好比个人是 awesomes-cn.github.io。

而后就能够在浏览器中经过 http://<github用户名>.github.io 访问了。

如此，一个我的主页就诞生了，能够用来作我的简历和博客，彻底不用服务器和数据库参与，并且不须要花一分钱的费用。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程