gulp jq项目脚手架

As developers we always find ourselves getting bored of doing one thing every now and then just to kick-start a new project.

作为开发人员，我们总是发现自己无时无刻不在做一件事情，而只是开始一个新项目。

Personally, the most annoying phase of my development cycle is setting up because I find myself doing the exact (though with few differences) same thing I did in the previous project and the one before the previous project and so on.

就个人而言，我的开发周期中最烦人的阶段是设置，因为我发现自己做的工作与上一个项目和上一个项目之前的工作完全相同（尽管差异不大）。

The immediate option was to copy a previous project and get rid of the unwanted parts. Huh, that can be tedious too. Smart enough though, you could consider creating a template and push to GitHub, then clone it every time you would start a new project. The git option on the other hand is not good enough - take for instance you have created a MEAN repository for most of your application and your client explicitly asks for Angular-Material and not Bootstrap. The only thing you can do is clone, remove Bootstrap and download Angular-Material into the boilerplate which you still have to re-configure. What else can be used? GENERATORS!

立即的选择是复制以前的项目，并删除不需要的部分。 呵呵，那也可能很乏味。 尽管足够聪明，您可以考虑创建一个模板并推送到GitHub，然后在每次启动新项目时将其克隆。 另一方面，git选项还不够好-例如，您已经为大多数应用程序创建了MEAN存储库，而客户端明确要求使用Angular-Material而不是Bootstrap。 您唯一可以做的就是克隆，删除Bootstrap并将Angular-Material下载到样板中，您仍然需要重新配置。 还有什么可以用的？ 发电机 ！

救援人员 (Generators to the Rescue)

Generators are gaining popularity in the community of programmers. In one way or the other, advanced IDEs like Visual Studio and Eclipse help you with a skeleton that has your specified dependencies so you can build your project on.

生成器在程序员社区中越来越受欢迎。 无论哪种方式，高级的IDE（例如Visual Studio和Eclipse）都可以通过具有指定依赖项的框架来帮助您，以便您可以在其上构建项目。

Unfortunately, JavaScript has no such IDEs and are only written with text (and code) editors. With this limitation in mind JS supported generators (like and Slush(http://slushjs.github.io/#/)) were introduced and are completely configurable.

不幸的是，JavaScript没有这样的IDE，只能用文本（和代码）编辑器编写。 考虑到这一限制，引入了JS支持的生成器（例如和Slush（http://slushjs.github.io/#/）），并且这些生成器是完全可配置的。

烂泥 (Slush and Gulp)

is a task runner and so powerful that it can be used to generate an application with the help of gulp-template, gulp-conflict, gulp-install and some other gulp plugins.

是一个任务运行程序，功能强大，可以借助gulp-template ， gulp-conflict ， gulp-install和其他一些gulp插件来生成应用程序。

To use gulp as a generator, you will have to specify the directory manually with some other required configurations and that is where slush comes in.

要将gulp用作生成器，您将必须使用其他一些必需的配置手动指定目录，这就是slush引入的地方。

Slush was built by Joakim Carlstein to help serve the purpose of centralizing generators. Slush does not offer any standalone service but depends on gulp.

Slush由Joakim Carlstein 建造，旨在帮助实现发电机集中的目的。 Slush不提供任何独立服务，但取决于gulp。

Also remember that Slush comes with no functionality of its own, the only thing it provides is a convention and convenience of running global gulpfiles (in this case slushfiles) with the purpose of scaffolding projects, or anything else useful for that matter. So if something is missing it should probably be implemented as a gulp plugin. - Joakim Carlstein.

还要记住，Slush本身没有功能，它提供的唯一约定是方便并运行全局gulpfiles（在本例中为slushfiles），目的是为项目提供脚手架或其他有用的东西。 因此，如果缺少某些内容，则应将其实现为gulp插件。 -Joakim Carlstein。

发电机 (Generators)

though still a growing framework comes with varieties of generators. It is open source and you can create yours and share. Slush basically runs the gulp module for every generator thereby producing a template as the slushfile specifies. Below are some popular generators:

尽管仍然存在一个不断增长的框架，但生成器种类繁多，但它们仍然 。 它是开源的，您可以创建自己的并共享。 Slush基本上为每个生成器运行slushfile模块，从而生成slushfile指定的模板。 以下是一些流行的生成器：

安装 (Installation)

As slush needs gulp to complete it's task, it is required that you install gulp and slush together:

由于slush需要gulp完成任务，因此需要同时安装gulp和slush：

$ npm install -g slush gulp bower

The command will use install slush gulp and bower CLI globally on a local machine using npm (install ).

该命令将使用通过使用npm（安装 ）在本地计算机上全局安装slush gulp和bower CLI。

That is basically setup and we can now start creating and generating project templates. We will focus on generating templates and in later articles we will talk about creating generators. The most popular template generator is that of so let us install the Angular generator and then scaffold a project with it:

这基本上是设置，我们现在可以开始创建和生成项目模板。 我们将专注于生成模板，在以后的文章中，我们将讨论创建生成器。 最受欢迎的模板生成器是模板生成器，因此让我们安装Angular生成器，然后使用它构建一个项目：

$ npm install -g slush-angular

脚手架角应用 (Scaffolding an Angular Application)

On our empty project folder:

在我们的空项目文件夹中：

$ slush angular

This is were it gets amazing. Running the above command let's you choose possible dependencies and then installing those dependencies for you with bower and npm. Answer the interactive questions carefully and for our application we will be allowing the generator to setup a Todo sample for us.

这是令人惊奇的。 运行上面的命令让您选择可能的依赖项，然后使用bower和npm为您安​​装这些依赖项。 仔细回答交互式问题，对于我们的应用程序，我们将允许生成器为我们设置Todo示例。

Angular application scaffolding process

角应用程序脚手架过程

Folder structure after scaffolding

脚手架后的文件夹结构

Once Slush is done with its scaffold process, run gulp serve to serve the application on port 3000 of your localhost.

一旦Sl​​ush完成了其脚手架过程，请运行gulp serve在本地主机的端口3000上为应用程序gulp serve服务。

$ gulp serve

Serving application with gulp

用gulp服务应用程序

Running Todo application

运行Todo应用程序

脚手架应用组件 (Scaffolding Application Components)

You can create sub-components such as controllers, filters, directives, services, modules.

您可以创建子组件，例如控制器，过滤器，指令，服务，模块。

Currently Joakim Carlstein is yet to provide this feature though he is on it but provided a solution by creating another generator named slush-angular-gulp

目前，Joakim Carlstein尚未提供此功能，但通过创建另一个名为slush-angular-gulp生成器提供了解决方案。

Install the generator:

安装发电机：

$ npm install -g slush-angular-gulp

Start a project with it

用它开始一个项目

$ slush angular-gulp

Now to add a sub-component:

现在添加一个子组件：

$ slush angular-gulp:
     
     
      // e.g. slush angular-gulp:controller article
     
    

结论 (Conclusion)

Using generators as you have seen will increase your productivity as a developer by a significant percentage. is good... Slush is awesome... Grunt is amazing... Gulp is wonderful.

如您所见，使用生成器将显着提高开发人员的生产率。 很好... Slush很棒... Grunt很棒... Gulp很棒。

So whichever combo suites your workflow, do not hesitate to use it. You are not limited to already provided generators like those in the provided table.

因此，无论哪个套件适合您的工作流程，都请毫不犹豫地使用它。 您不仅限于已提供的生成器（如提供的表中的生成器）。

Take a break from your P.C, take a look at your past projects and isolate those repeated sections and logics into a generator which Scotch will cover soon on how to create and you are good to impress friends who never used a generator but do not forget to share with them.

从您的PC上休息一下，看看您过去的项目，并将这些重复的部分和逻辑隔离到一个生成器中，Scotch很快将介绍如何创建该生成器，您可以打动那些从未使用过生成器但不会忘记的朋友。与他们分享。

翻译自:

gulp jq项目脚手架