前端框架可以直接使用,为何需要nodejs/gulp等工具?

前端新手,初步了解了bootstrap和semantic ui,对这些框架的理解是需要什么就直接写相应的class。看文档时发现二者都有提及node和gulp等工具,但因为不理解使用这些工具的目的和用处,所以也一直没花时间看。想在学习这些东西前请教一下学习的必要性及用处
关注者
346
被浏览
33842

19 个回答

谢邀。

你说的 Bootstrap 等都是 CSS 框架,确实只需要写相应的 class。然而,Node、Gulp 并不是同一类型的东西,也就是说并不是 CSS 框架。

我先来讲 Gulp:

假设有这么一个 HTML:
<div class="a">
  <div class="b">
    <div class="c"></div>
  </div>
</div>

当你写 CSS 的时候,你可能会这样写:
.a { background: blue; }
.a .b { background: red; }
.a .b .c { background: black; }

你会发现,这样老是要把父级元素写出来,超烦!于是我们有了 Less、Sass 等 CSS 预处理器。

现在,用我比较喜欢的 Less,那么上面那段代码就变成:
.a {
    background: blue;
    .b {
        background: red;
        .c { background: black; }
    }
}
(备注:知乎居然不支持 Less 语法高亮,凑合着看吧~)

然后,我们用 less 命令,那么这段 Less 代码就会被编译成上面那样的 CSS 了。这样嵌套地写,是不是爽很多?

但是问题来了,当 Less 文件超多,我们总不能老是自己手动去执行 less 命令吧?那么 Gulp 是时候现身了。

(中间省略具体怎么写 Gulp 任务,请自行学习 Gulp)

于是我们只需要在命令行里执行 gulp 命令,那么 Gulp 就会根据我们写的 Gulp 任务来自动处理你的所有 Less 文件了。我们还可以使用 gulp watch 命令,使得每当我们修改 Less 文件时它就会自动帮你再编译一次,这样你就可以直接在浏览器里刷新看到新的效果了。

然后是 Node.js:
Node.js 你可以理解为一种用 Javascript 去写后端程序的框架,正是因为它是使用 ECMAScript 语法的,也就是说它跟 Javascript 的语法是一样的,所以它对于前端工程师来说是友好的,前端工程师不需要再去掌握另一种比如 PHP、Java 这样的语法。

通过 Node.js,前端工程师可以自己在后端架设一层专门用来渲染页面的 UI 层,不需要去依赖后端,后端只管提供接口和服务就好,这就是大前端。

暂时只讲这么多吧~
泻药。
本来想吐槽的,写了不少,想想没必要还是好好回答一下吧。

1,必要性不大,没出这2个东西之前,前端开发大家都干的好好的,所以你说非要用是扯淡的。
2,前端框架和这2个东西关系不大,nodejs是语言,gulp是nodejs开发的一个工具,这2个东西都是后端的东西。

好了,说说作用吧。

作用是肯定有的,没出现gulp的时候有grunt,grunt没出现的时候用ant,ant没有的时候,可能是用bash shell或者java或者php或者等等许多其他语言开发类似的工具,make应该也算是一种。ant,grunt,gulp等都是工具。

这些工具最初的作用是神马呢?为什么前端开发需要呢。

当我们开发一个项目的时候,我们会遇到 @Jasin Yip 所说的那些问题,但是这只是其中一个方面,我们会编译less成为css,会编译coffee成为javascript,就像我们用make或者ant编译其他语言的源码一样。

我们开发的时候会遇到各种类似问题,所以我们需要一系列的解决任务

神马意思呢?

我们需要编译less,编译coffee,处理css中的图片路径,压缩项目中的图片文件,合并项目中的js代码,压缩代码,混淆代码,提交代码,删除没用的临时文件,移动到某个目录,再进行提交操作或者各种奇奇怪怪的事。

所以当你的项目比较复杂的时候,你是无论如何都要进行许多次的同样或者类似的任务,最终才能产生最后所需要的东西,这个过程有许多的解决办法,gulp就是其中之一。帮你一次配置,多次快速执行。

最后,nodejs和gulp的关系就是爹和儿子关系。
为什么?