构建配置文件_声明式构建配置

构建配置文件

Some time ago I posted an article how you can build apps faster using a build tool called Angus. In the meantime the tool has gotten a whole lot better, embracing the concept of declarative build configurations. In this article I would like to show you what that means and how Angus can help you build web apps in a much faster way.

前一段时间，我发布了一篇文章，介绍如何使用称为Angus的构建工具更快地构建应用程序 。 同时，该工具包含声明式构建配置的概念，因此变得更加完善。 在本文中，我想向您展示这意味着什么以及安格斯如何帮助您以更快的方式构建Web应用程序。

在餐馆里 (In The Restaurant)

Imagine for a second you're sitting in a restaurant. You take a look at the menu. You decide that you would like a Pizza Vegeta today, because you're feeling healthy. Hmm!

想象一下您坐在餐厅里。 您看一下菜单。 您决定今天要吃Vegeta比萨饼，因为您感觉健康。 嗯！

Next, you stand up from your table. You walk to the kitchen. You start to delegate.

接下来，您从桌子站起来。 你去厨房。 您开始委托。

"You there! Take some dough and make it flat and round."

“你在那里！拿一些面团，使它平坦而圆形。”

"And you! Chop some onions, tomatoes and bell peppers."

“还有你！剁碎洋葱，西红柿和甜椒。”

"Now you, grab the tomato sauce and cheese and put them on the dough."

“现在，抓住西红柿酱和奶酪，然后将它们放在面团上。”

"Put all those vegetables on the pizza and then put it in the oven for ten minutes!"

“将所有这些蔬菜放在比萨上，然后放入烤箱十分钟！”

After ten minutes, you come back. You put the pizza on your plate, walk to your table and start eating.

十分钟后，您回来。 您将披萨放在盘子上，走到桌旁开始吃东西。

GulpJS：一个案例研究 (GulpJS: A Case Study)

Let's wake up, and take a look at a common build tool configuration from GulpJS.

让我们醒来，看看GulpJS中常见的构建工具配置。

gulp.task('clean', function(cb) {
  del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

gulp.task('default', ['watch', 'scripts', 'images']);

If you compare this configuration with the absurd restaurant scene, it's essentially not that different. You're telling Gulp what to do, how to do it and when and where to get your compiled files.

如果将此配置与荒唐的餐厅场景进行比较，则本质上没有什么不同。 您正在告诉Gulp该做什么，如何做以及何时何地获取已编译文件。

Can we do better than that? What if there was a way to tell Gulp, "Hey, today I'd like a Pizza Vegeta."?

我们可以做得更好吗？ 如果有一种方法可以告诉Gulp：“嘿，今天我要一份Vegeta披萨”。

What if there was a tool, where you could say "Today I'd like to have an app that uses AngularJS, some bootstrap, karma as test runner, and hmmmm... I'll have Sass as my CSS compiler this time."

如果有一个工具，您可能会说：“今天，我想拥有一个使用AngularJS，一些引导程序，因果报应作为测试运行程序以及hmmmm的应用程序……我这次将Sass作为我CSS编译器。 ”

Angus，声明性构建工具 (Angus, A Declarative Build Tool)

Having built a ton of apps, I've always found myself having to declare the same tasks over and over again, although they essentially stayed the same across my apps. Out of frustration with the state of things, I decided to create a tool called Angus that makes build configurations declarative.

构建了大量的应用程序后，我总是发现自己不得不一遍又一遍地声明相同的任务，尽管它们在我的应用程序中基本上保持不变。 出于对事物状态的沮丧，我决定创建一个名为Angus的工具，该工具使构建配置具有声明性。

Take a look at a common Angus configuration.

看一下常见的Angus配置。

{
    bower: {
        packages: [
            'angular',
            'threejs',
            'Keypress',
            'underscore@1.7.0',
            'angular-ui-router',
            'hammerjs'
        ],
        filesNeeded: {
            js: [
                'angular/angular.js',
                'angular-ui-router/release/angular-ui-router.js',
                'Keypress/keypress.js',
                'hammerjs/hammer.min.js',
                'threejs/build/three.js',
                'underscore/underscore.js'
            ]
        }
    },
    usesAngularJS: true,
    testRunner: 'karma',
    cssCompiler: 'less'
};

In essence, I'm telling Angus which bower packages my app needs and which files to actually use from those bower packages. Next I'm declaring it uses AngularJS, Karma as its test runner and Less as its CSS compiler.

本质上，我是在告诉安格斯我的应用需要哪些程序包，以及那些程序包中实际使用的文件。 接下来，我要声明它使用AngularJS，Karma作为其测试运行器，并使用Less作为其CSS编译器。

That's it. There are no other hidden configuration files. I just run angus dev from the command line and my app launches in the browser, ready to go.

而已。 没有其他隐藏的配置文件。 我只是从命令行运行angus dev ，然后在浏览器中启动我的应用程序，随时可以使用。

Angus takes care of everything. It installs your bower packages, minifies your files, compiles your CSS, watches for changes and launches your app in a browser. But there's a lot more features.

安格斯会照顾一切。 它会安装您的Bower程序包，缩小文件，编译CSS，监视更改并在浏览器中启动您的应用程序。 但是还有更多功能 。

约定优于配置 (Convention Over Configuration)

Angus applies the concept of convention over configuration so that it doesn't burden the user with making unnecessary choices such as where to store the distributed files. For one, it requires you to layout your source files in a way that's common for web apps.

Angus 在配置上采用了约定的概念，这样它就不会使用户负担不必要的选择，例如将分布式文件存储在何处。 首先，它要求您以Web应用程序常见的方式来布局源文件。

hello-world/
    bower_components/
    src/
        assets/
        style/
        core/
        index.html
    angus.config.js

This makes things a lot simpler. By having your source files structured in the same way for every app, Angus can automatically build your app without you having to specify where your source and library files are.

这使事情变得简单得多。 通过为每个应用程序以相同的方式构造源文件，Angus可以自动构建您的应用程序，而无需指定源文件和库文件的位置。

Next, all underlying tasks use this folder structure to build your app. All common tasks are pre-configured, Angus just tells them whether to execute or not based on your config file. Again, it's declarative.

接下来，所有基础任务都使用此文件夹结构来构建您的应用程序。 所有常见任务都是预先配置的，Angus只是根据您的配置文件告诉它们是否执行。 同样，它是声明性的。

In addition, it's a lot easier to maintain. For example, if you wanted to switch to another CSS compiler, it's simply a matter of enabling it in your config file.

此外，它更容易维护。 例如，如果要切换到另一个CSS编译器，只需在配置文件中启用它即可。

快速开始 (Quick Start)

Getting started with Angus is easy. Just install it with npm install -g angus.

安格斯入门非常容易。 只需使用npm install -g angus 。

Next, create a sample app by doing angus create hello-world. This will create a folder hello-world.

接下来，通过执行angus create hello-world创建示例应用程序。 这将创建一个文件夹hello-world 。

Inside this folder, run angus dev and open your browser to visit http://localhost:9000/.

在此文件夹中，运行angus dev并打开浏览器访问http://localhost:9000/ 。

That's it! For further information, please refer to the detailed readme on GitHub.

而已！ 有关更多信息，请参阅GitHub上的详细自述文件 。

结论 (Conclusion)

I hope that this article has given you new insights in how declarative build configurations can help you focus your efforts on your app and not your build process. Angus has gotten a lot of good feedback so far, and I invite you to try it out and make an opinion for yourself. If you have any questions I will be happy to answer them in the comments section below.

我希望本文能使您对声明式构建配置如何帮助您将精力集中在应用程序而非构建过程上有新的见解。 到目前为止，Angus收到了很多不错的反馈，我邀请您尝试一下并为自己提出意见。 如果您有任何问题，我们将很乐意在下面的评论部分中回答。

翻译自: https://davidwalsh.name/declarative-build-configurations

构建配置文件