to the beginning of the notes about the components

make vs. grunt vs. gulp watch

task runners - a class of utilities that automate the file conversion process. There are many, Make, Rake, Cake, etc. Usually performed tasks are very important and are performed often and very often. Compiling, running tests, rendering and converting file formats, minifying js files, converting CSS. Extremely important thing for daily work.
')


grunt (grunting). Gruntfile.js is the configuration file for the grunt utility. Gruntfile.js is intuitive, one look at the sample is enough to create a similar one for your task. But gruntfile.js is extremely ugly, in addition, the authors of gulp write that grunt extremely inefficient. Writing and reading gruntfile.js quickly becomes very boring.

gulp (breath of fresh air). Unlike gruntfile.js, gulpfile.js is not a configuration file, but a program on node.js. See the comparison of the two files . Yes, it is much more convenient and familiar. In addition, gulp plug-ins perform each of their tasks. For example, to minify a js-file, you need to call two plugins, one minifitsiruet the file, and the other renames it to the file.min.js. It is right. But the size of guplfile.js is almost as big as gruntgile.js, and to create its equally dull process for the tenth time. However, a matter of taste, but, IMHO, gulp much more convenient than grunt .

Make is great and powerful, but the Makefile has the disadvantage that it is very incomprehensible. There is either a complete, very detailed and dry description - a textbook . Or a lot of manuals retelling the same text from the 1960s of the last millennium, when there was no programming language yet, and the C language was still in development. Here are these mossy examples in C and retold. However, you can figure out the Makefile. This will allow you to forget about both grunt and gulp . In the component-community, as well as the node-community, the Makefile very popular, which is why it is discussed here.

Makefile - Review

make can execute any shell commands, and process files of any type, there are no restrictions. The only thing - before the team should not be a space, and the tabulator. (Yet the past millennium, people were strong). Another note - there are complaints about file names that have spaces.

file consists of a description of variables and rules.

target-rules

The target rules in the Makefile are organized as follows:

 target: sources tab -> commands tab ->tab -> commands, .     

here target is what we need to get; sources is an array of source files. Normally, a target is just a file, with the exception of special PHONY targets (see below).

If make encounters an error, it interrupts. (option -i ignore errors).

make uses mtime - the last time the file was modified. target is considered ready if, firstly, it already exists, and secondly it is newer than its source code. Therefore, make only processes files that have changed.

make starts with the target target of a given rule. If you call make without a parameter, this is the first rule. He looks at the sources, and if he has his own rules for them, he recursively checks them. The order of processing sources in the array is arbitrary!

make goes down the source chain until it finds a finished target, or a target with no source, or its source does not have its own rules. When he finds such a case, he goes back through the recursion chain, executing the appropriate commands. make creates recursion chains for each source.

rules must be separated by an empty line.

pattern rules

The pattern rules describe what to do with a particular extension, and have the form:

 %.js: %.html @component convert $<; 

phony rules

Phony rules are not files, but commands. They may have source codes, recursion, and everything that other rules have, but mtime is not calculated for them. For example:

 clean: rm -fr build components $(TEMPLATES) .PHONY: clean 

Phony rules need to be described in a special variable .PHONY

variable description

There are automatic, predefined variables, they need to be understood. Here are some common $ @ - the name of the target, $ + - all sources, separated by a space, $ <; - the name of the first source. The complete list in the tutorial is http://www.gnu.org/software/make/manual/make.html#Automatic-Variables

Normal variables (files that need processing, targets that have files in the source) - you can simply list

 JS = index.js example.js 

but it is often convenient to calculate them using the shell:

 CF = $(shell find templates -name "*.coffee") 

or using the built-in utility wildcard:

 SRC = $(wildcard client/*/*.js) 

Or define targets from a variable already created:

 HTML = $(JADE: .jade=.html) 

In the latter case, the html files themselves are not created yet, but only an array of their names for further processing.

Examples of setting variables and rules:

 SRC = $(wildcard client/*/*.js) HTML = $(wildcard client/*/*.html) TEMPLATES = $(HTML:.html=.js) build: components $(SRC) $(TEMPLATES) @component build components: component.json @component install %.js: %.html @component convert $<; 

What's going on here? make encounters the name of the components, detects such a directory, and if we make changes to the component.json file, install.

Next, it goes to SRC, this is an array of JS files. It looks at the 'sources' of the first .js file, finds the pattern-rule for .js and executes it from the .html source. Then it assembles everything into a single build/build.js . See component build , component convert .

another example:

 JADE = $(shell find templates -name "*.jade") HTML = $(JADE:.jade=.html) all: $(HTML) %.html: %.jade jade < $< > $@ 

An example of pattern-rules is to process coffee, jade:

 %.js: %.coffee @coffee -c $< %.js: %.jade @jade -c $< 

Naturally, the utilities coffee , jade must be installed on the system.

watch

watch is not a component, not a node.js utility, but a regular unix utility. (It is strange that it is not in Altlinux , for example).

clone and set it up:

 $ PREFIX=~ make install 

and run make

 $ watch make &; 

Compare with what you need to do to track changes in the source code, and auto-recompile in grunt . In gulp this functionality is built into the kernel, not a plugin. But that doesn't make it easier to run it in gulpfile.js . I do not even want to give a sample code.

In the Makefile, you can organize the same thing without the watch utility:

 .PHONY: continuously continuously: while true; do make 1>/dev/null; sleep 3; done 

to be continued