关于前端自动化，打包的疑惑

Question

一直搞不懂前端自动化，打包，部署代码这种概念；工具学了几种，但就是串不起来，举个例子：
我写的代码目录：

还停留在新建个HTML插点图片css代码的阶段；
但是clone下来直接双击就能运行
————
但是别人家的代码一般是这样的：

clone下来要 npm install，npm run build一下才能跑，
而且有那种.gitignore .babelrc package.json这种配置文件。

js里的写法也是

import Vue from 'vue'
import App from './App.vue'
import helpers from './helpers'

类似这样模块化的写法。
我就不知道怎么搞，我学了一点gulp会用它来编译一下sass，也会 npm init 但是不知道package.json怎么写。
网上看了几篇教程也是教人怎么用工具的，没细说。
哪里有系统一点的前端自动化教程呢？
或者求告诉一下搜索的关键字，谢谢！