ic卡写卡 angus_使用Angus更快地构建Web应用程序

阳光穿透心脏的1/2处 2023-02-22 03:46 14阅读 0赞

ic卡写卡 angus

Nick's outstanding utility, Angus, has changed! [Click here][] to read an updated post!

尼克杰出的实用工具安格斯(Angus)已经改变了！ [点击这里][Click here]阅读更新的帖子！

When it comes to building web apps, there are a couple of tools available that help you develop faster. There's [GruntJS][], [GulpJS][], [Brunch][] and others which streamline your workflow by doing a series of build tasks:

在构建Web应用程序时，有一些可用的工具可帮助您更快地开发。 有[GruntJS][] ， [GulpJS][] ， [Brunch][]等，它们通过执行一系列构建任务来简化工作流程：

*  Test the code
    
    测试代码
 *  Clean the build directory
    
    清理构建目录
 *  Copy source files to the build folder
    
    将源文件复制到构建文件夹
 *  Do some magic tricks on your copied files, such as replacing variable names.
    
    对复制的文件做一些魔术，例如替换变量名。
 *  Compile Less or Sass files
    
    编译更少或Sass文件
 *  Dynamically generate script tags for your index.html
    
    为您的index.html动态生成脚本标签
 *  Run a webserver to test out your app locally
    
    运行网络服务器以在本地测试您的应用
 *  Watch for code changes and re-build
    
    观察代码更改并重新构建
 *  ...
    
    ...

![gruntcli][]

These tools do an outstanding job of helping you develop your web app faster. Huzzah!

这些工具在帮助您更快地开发Web应用程序方面做得非常出色。 晕！

## 让我们构建另一个应用程序！ **(**Let's Build Another App!**)** ##

Once you have finished your app and have started on a new project, you again would like to have a good build configuration. You have optimised your last app's build config so it builds as efficiently as possible, and it's got some cool gimmicks like that AWS S3 deploy task which you spent a couple of hours on last weekend.

完成应用程序并开始新项目后，您再次希望拥有良好的构建配置。 您已经优化了上一个应用程序的构建配置，以使其尽可能高效地构建，并且有一些很酷的头，例如上个周末您花了几个小时的AWS S3部署任务。

Obviously, you want to reap the fruits of your hard labor and use those new and optimised build tasks in your new app as well. What to do now? There are a couple of ways.

显然，您希望收获辛勤工作的成果，并在新应用程序中使用那些经过优化的新构建任务。 现在要做什么？ 有两种方法。

### 复制旧应用 **(**Duplicating the Old App**)** ###

You could just copy paste your old app folder, rename it and start working. The problem comes when you are improving your build setup even further. By now, there are likely newer and faster build tasks available, so you eagerly start implementing those in your new app. And wow, now there's a soft CSS refresh feature in the new app!

您可以复制粘贴旧的应用程序文件夹，将其重命名并开始工作。 当您进一步改善构建设置时，就会出现问题。 到目前为止，可能会有更新，更快的构建任务可用，因此您急切地开始在新应用程序中实现这些任务。 哇，新应用程序现在提供了软CSS刷新功能！

A few days later you need to bring an update to your old app. You painfully notice some cool features are missing in the old app's build config. Like that soft CSS refresh and the numerous performance updates you've made. What now?

几天后，您需要对旧应用进行更新。 您痛苦地注意到旧应用程序的构建配置中缺少一些很酷的功能。 像软CSS刷新和您所做的众多性能更新一样。 现在怎么办？

### 约曼 **(**Yeoman**)** ###

One solution to the problem is [Yeoman][], a scaffolding tool. It generates your build config by asking questions, every time you make a new app. On its website you can find plenty of generators which include web frameworks and build tasks that have been set-up for you. These generators are maintained by many people and you will reap the benefits of their optimisations when you generate a new app.

解决这个问题的一种方法是脚手架工具[Yeoman][] 。 每当您制作新应用时，它都会通过提问来生成您的构建配置。 在其网站上，您可以找到大量的生成器，包括Web框架和为您设置的构建任务。 这些生成器由许多人维护，生成新应用时，您将获得其优化的好处。

![yeoman][]

Generators aren't perfect however. When they are updated to include new tools and optimisations, you are stuck with your old build config. You can't simply [update][] without generating and answering those scaffolding questions *again*. In addition, it is likely that your ideal build config requires changing or adding tasks such as the AWS S3 deploy which you need for your particular client.

发电机并不是完美的。 当它们进行更新以包括新工具和优化时，您将无法使用旧的构建配置。 您不能简单地[更新，][update]而不必*再次*生成并回答这些脚手架问题。 此外，理想的构建配置可能需要更改或添加特定客户端所需的任务，例如AWS S3部署。

![yeoman2][]

The problem is that at the end of the day, you are again duplicating logic. When you have several apps, it is very likely that the build steps are similar if not identical. If you want to change something there or add a cool new build feature to many apps, you're out of luck.

问题是，归根结底，您还是在重复逻辑。 当您有多个应用程序时，构建步骤很可能是相似的(如果不一致)。 如果您想在那里更改某些内容或为许多应用程序添加酷炫的新构建功能，那么您就不走运了。

### 不要重复自己 **(**Don't Repeat Yourself**)** ###

A build config is just like any other code. You should not repeat yourself and you want to re-use your build config across different apps. What if there was a way to use one build configuration for all your apps?

构建配置与其他任何代码一样。 您不应该重复自己的操作，而要在不同的应用程序之间重用构建配置。 如果有一种方法可以对所有应用程序使用一个构建配置怎么办？

## 介绍安格斯 **(**Introducing Angus**)** ##

Amid growing frustration with the state of things, I decided to make a generic and pre-configured build framework called [Angus][].

在对事物状态越来越沮丧的情况下，我决定制作一个称为[Angus][]的通用且预先配置的构建框架。

![angus][]

Angus is a pre-configured build framework that you simply clone as a git repository. Inside this repo, you build your apps inside an `apps/` folder which gets ignored by the Angus repo. For each app, you can define which libraries and build steps you would like to use. Every build task is already configured to work with other tasks.

Angus是一个预先配置的构建框架，您只需将其克隆为git存储库即可。 在此存储库中，您可以在`apps/`文件夹中构建应用程序，而该文件将被Angus存储库忽略。 对于每个应用程序，您可以定义要使用的库和构建步骤。 每个构建任务都已配置为与其他任务一起使用。

The framework uses GruntJS to do all build steps. The cool thing is that you don't need to configure anything, you just need to tell which tasks you'd like to enable per app.

该框架使用GruntJS完成所有构建步骤。 很棒的事情是您不需要配置任何东西，只需要告诉您要为每个应用程序启用哪些任务即可。

### 项目结构 **(**Project Structure**)** ###

angus/   <-- angus repository
        Gruntfile.js
        grunt/   <-- generic build tasks
        apps/
            hello-world/
            my-second-app/    <-- app sub repository
                assets/
                scss/
                app.js
                config.js
                index.html

### 内置应用！ **(**Apps Inside!**)** ###

Unknown to many, Git repositories can actually exist within each other without using rocket science like submodules. Inside Angus, the `apps/` folder gets ignored by git. You can safely create sub-folders inside `apps/` which have **their own repositories**! To do so, simply create a folder inside the `apps/` folder and run `git init`.

许多人都不知道，Git存储库实际上可以彼此存在，而无需像子模块那样使用火箭科学。 在Angus内部，git会忽略`apps/`文件夹。 您可以在有**自己存储库的** `apps/`安全地创建子文件夹！ 为此，只需在`apps/`文件夹内创建一个文件夹，然后运行`git init` 。

Given this structure, you can develop as many apps as you like without having to generate or adjust build configurations.

有了这种结构，您可以开发任意数量的应用程序，而不必生成或调整构建配置。

### 配置每个应用 **(**Configuring Each App**)** ###

Every app inside Angus has its own configuration file, `config.js`. In this file, you can define Bower libraries and tell Angus which files from Bower you actually need. When including Bootstrap for instance, you may only really need a couple of `.scss` files.

安格斯内部的每个应用程序都有其自己的配置文件`config.js` 。 在此文件中，您可以定义Bower库，并告诉Angus您实际需要Bower中的哪些文件。 例如，当包含Bootstrap时，您可能实际上只需要几个`.scss`文件。

**Example config file**
    packages: [
        'angular',
        'bootstrap-sass-official'
    ],
    // A list of files which this app will actually use from the bower packages above.
    // Angus will look inside bower_components/ for these files.
    libIncludes: {
        js: [
            'angular/angular.js'
        ],
        scss: [
            // Core variables and mixins
            'bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss',
            'bootstrap-sass-official/assets/stylesheets/bootstrap/_mixins.scss',
            'bootstrap-sass-official/assets/stylesheets/bootstrap/_grid.scss'
        ]
    }

### 运行应用 **(**Running the App**)** ###

Simply run `grunt dev`, and Angus takes care of the rest. By default it will launch the `hello-world` application, but you can pass the `—app=your-app` parameter or change the `config.json` file in the root Angus folder.

只需运行`grunt dev` ，剩下的事情由安格斯负责。 默认情况下，它将启动`hello-world`应用程序，但是您可以传递`—app=your-app`参数或更改Angus根文件夹中的`config.json`文件。

Angus will automatically install Bower packages, auto include libraries and serve your app. It comes with \[pushState support\](http://diveintohtml5.info/history.html), auto-refresh on code changes and soft CSS refresh on CSS changes.

Angus将自动安装Bower软件包，自动包含库并为您的应用程序提供服务。 它带有\[pushState support\](http://diveintohtml5.info/history.html)，对代码更改的自动刷新和对CSS更改的软CSS刷新。

## 部署中 **(**Deploying**)** ##

Angus also includes a `grunt prod` command, which takes care of minification, uglifying and concatenating. The output of your files will be inside the `dist/prod/` folder. You can even **deploy directly to Amazon S3** with one command.

安格斯(Angus)还包括一个`grunt prod` unt的`grunt prod`命令，该命令负责缩小，丑化和连接。 文件的输出将在`dist/prod/`文件夹中。 您甚至可以使用一个命令**直接部署到Amazon S3** 。

## 其他任务 **(**Additional Tasks**)** ##

You can easily enable additional tasks you would like your app to execute. If you're running AngularJS, chances are you'll be wanting to use common build tasks specific to AngularJS such as template minifying, constants generation and the ng-min library.

您可以轻松启用希望您的应用执行的其他任务。 如果您正在运行AngularJS，则可能会想要使用特定于AngularJS的常见构建任务，例如模板缩小，常量生成和ng-min库。

The cool thing is, these tasks are already preconfigured! You just need to enable them as follows in your `config.js` file:

最酷的是，这些任务已经预先配置！ 您只需要在`config.js`文件中启用它们，如下所示：

// In addition to the default task list (core/defaultTasks.js), also execute these
    gruntTasksAdd: [
        'html2js',
        'ngconstant',
        'ngmin',
        'karma'
    ],

## 未来 **(**The Future**)** ##

Angus is still a very fresh project, and I encourage you to help out by checking out the source code and sending pull requests. In the future, we may even switch to newer tools such as GulpJS or Brunch, but with the same philosophy. Don't repeat yourself!

Angus仍然是一个非常新鲜的项目，我鼓励您通过签出源代码并发送请求请求来提供帮助。 将来，我们甚至可能会切换到更新的工具，例如GulpJS或Brunch，但使用相同的理念。 不要重复自己！

I hope I have given you fresh insights into the build process of web apps, and how Angus can increase your productivity. Give it a try and let me know what you think!

希望我能为您提供有关Web应用程序构建过程的新见解，以及安格斯如何提高您的生产力。 试试看，让我知道您的想法！

> 翻译自: [https://davidwalsh.name/building-web-apps-faster-angus][https_davidwalsh.name_building-web-apps-faster-angus]

ic卡写卡 angus

[Click here]: https://davidwalsh.name/declarative-build-configurations
[GruntJS]: http://gruntjs.com/
[GulpJS]: http://gulpjs.com/
[Brunch]: http://brunch.io/
[gruntcli]: http://i.imgur.com/PLJAGQ9.png
[Yeoman]: http://yeoman.io/
[yeoman]: http://yeoman.io/assets/img/tool-yo.c3b1.png
[update]: http://stackoverflow.com/questions/18480316/how-to-upgrade-existing-project-scaffolded-with-yeoman
[yeoman2]: http://i.imgur.com/dkCpoBw.png
[Angus]: https://github.com/nickjanssen/angus
[angus]: http://i.imgur.com/mNyfmrL.jpg
[https_davidwalsh.name_building-web-apps-faster-angus]: https://davidwalsh.name/building-web-apps-faster-angus