Translated from 日本語 • View original I have a strong feeling now, but in the world, the default development method in front-end development is to improve the efficiency of CSS and JavaScript coding with SCSS (SASS, LESS, etc.), CoffeeScript, etc., while at the same time making it easier to maintain and manage the source. I was very interested in incorporating technology in that area, and I used to code CSS and JavaScript in my own way, but recently I tried writing JavaScript with CoffeeScript in the development of Ruby on Rails, and the overwhelming high level of code productivity We have reached a point where we have no choice but to change the solid front-end coding methods we have been doing so far (no, finally...). ── With that said, I would like to immediately create an environment for compiling and building CSS/JavaScript on a Windows machine, which is a business machine (see this article for introducing CSS/JavaScript to the CentOS (Linux) environment on the web service side. ）。
In addition, the reason why I chose Gulp instead of Grunt as the build tool is that I wonder if the current trend is Gulp... Well, it is easier to write the configuration file than Grunt, and there is also the advantage that the configuration does not become complicated even if there are multiple resource settings.
Installing Node.js
First of all, Gulp is a node.js module, so it doesn't start without installing node.js. That's why I install the node.js. Installation is easy, just download the installer from the official Node.js website. My work machine was "Windows 7 (64-bit version)", so the file 'node-v0.12.0-x64.msi' is eligible (version of Node.js as of March 4, 2015 is 0.12.0). Once the installer is downloaded, launch it immediately. There will be some interaction, but there are no installation settings that you need to be particularly careful about. Once the intoring is complete, check the version of the Node.js from the Command Prompt (or Power Shell).
> node -v
v0.12.0
I will also check the version of npm installed in the bundle.
> npm -v
2.5.1
The installation of the Node.js is now complete.
Installing Gulp
Then install Gulp globally.
> npm install -g gulp
> glup -v
[**:**:**] CLI version 3.8.11
The installation is now complete. If the installation fails,
> npm install -g gulp --mscs_version=2012
── and add options, it may work. Then install it locally. To install locally, npm must be initialized. First, create a directory where you want to run gulp arbitrarily. In this article, we are creating a new directory called 'C:\npm\node_modules\gulp'.
> mkdir -p C:\npm\node_modules\gulp
> cd C:\npm\node_modules\gulp
> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (gulp) gulp_build
version: (1.0.0)
description: Gulp-build-test
entry point: (index.js)
test command:
git repository:
keywords: gulp
author: maeno
license: (ISC) MIT
About to write to C:\npm\node_modules\gulp\package.json:
{
"name": "gulp_build",
"version": "1.0.0",
"description": "Gulp-build-test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"gulp"
],
"author": "maeno",
"license": "MIT"
}
Is this ok? (yes) yes
You will be asked for some attribute values interactively, so you can enter them arbitrarily (you can also enter them all). Once initialized, install gulp locally.
> npm install gulp --save-dev
> gulp -v
[**:**:**] CLI version 3.8.11
[**:**:**] Local version 3.8.11
The '--save-dev' option specifies whether or not to install gulp's development package, so you don't need to add it specifically. Gulp is now available.
Compiling with Gulp
1. Compiling SASS
To compile SASS with qulp, you need a SASS plugin, so install it.
> npm install gulp-sass --save-dev
Once installed, create the CSS source file from which it compiles.
> mkdir sass | touch sass/style.scss
SCSS file contents:
a {
color: #88f;
&:hover {
text-decoration: none;
}
}
Next, create a compilation task. Create a 'gulpfile.js' directly below the directory where you installed gulp locally (in this example, 'C:\npm\node_modules\gulp').
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
Once the task is complete, let's run the compilation right away.
> gulp sass
[**:**:**] Using gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Starting 'sass'...
[**:**:**] Finished 'sass' after 6.5 ms
You will now have a 'CSS' folder with the compiled CSS files exported in it. If you look inside the CSS file, you can see that
a {
color: #88f; }
a:hover {
text-decoration: none; }
Oh~, it's properly built. Now you have implemented the Gulp + SASS compilation environment. Next, I'm going to try to create a LESS compilation environment.
2. Compiling LESS
Basically, it will flow in the same way as SASS. In other words, you need the LESS plugin to compile LESS with qulp, so install it.
> npm install gulp-less --save-dev
Once installed, create the CSS source file from which it compiles.
> mkdir less | touch less/style.less
LESS file contents:
@link-color: #88f;
a {
color: @link-color;
&:hover {
text-decoration: none;
}
}
This is an example of using variables for property values in a style that you might find most useful in a CSS precompiled environment.
Then create a compilation task. Edit the 'gulpfile.js' directly below the directory where you installed gulp locally (in this example, 'C:\npm\node_modules\gulp').
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less', function() {
gulp.src('less/**/*.less')
.pipe(less())
.pipe(gulp.dest('./css'));
});
Now we have all the '.less' files below 'less/' for the target source. Once you have the task, let's run the compilation right away.
> gulp less
[**:**:**] Using gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Starting 'less'...
[**:**:**] Finished 'less' after 8.43 ms
You will now have the compiled CSS file exported inside the 'CSS' folder. If you look inside the CSS file, you can see that
a {
color: #8888ff;
}
a:hover {
text-decoration: none;
}
The LESS compilation is better because the indentation is more formatted than the SASS compilation.
3. Compiling CoffeeScript
The method is almost the same as the aforementioned SASS and LESS, only the plugins used are different. First, install the plugin for compiling CoffeeScript.
> npm install gulp-coffee --save-dev
Once installed, create the original CoffeeScript file.
> mkdir coffee | touch coffee/script.coffee
What's in the CoffeeScript file:
Home = ->
$('.button').on 'click', (e) ->
e.preventDefault()
if window.confirm "Are you sure?"
$(@).trigger 'click'
else
return false
$(document).ready(Home)
The sample contains jQuery code. When you click on the '.button' class element, the event handler will issue a confirmation dialog.
Then create a compilation task. Edit the 'gulpfile.js' directly below the directory where you installed gulp locally (in this example, 'C:\npm\node_modules\gulp').
var gulp = require('gulp');
var coffee = require('gulp-coffee');
gulp.task('coffee', function() {
gulp.src('coffee/**/*.coffee')
.pipe(coffee())
.pipe(gulp.dest('./js'));
});
The target source will be all '.coffee' files below 'coffee/'. Let's run the compilation right away.
> gulp coffee
[**:**:**] Using gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Starting 'coffee'...
[**:**:**] Finished 'coffee' after 7.68 ms
You now have a 'js' folder and the compiled JavaScript file is exported to it. If you look inside the JavaScript file, you can see that
(function() {
var Home;
Home = function() {
return $('.button').on('click', function(e) {
e.preventDefault();
if (window.confirm("Are you sure?")) {
return $(this).trigger('click');
} else {
return false;
}
});
};
$(document).ready(Home);
}).call(this);
Great!
By the way, Gulp's plugins can coexist with each other, so you can merge each task into a 'gulpfile.js' to create an environment where you can compile SASS, LESS, and CoffeeScript. There are also quite a few other valid ones in Gulp plugins that should be defined by default (such as automatic vendor prefix granting and minifying), so it's a good idea to look for them according to your usage scenario.
Now we finally have the minimum environment necessary for today's front-end development.