ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

node.jsのバージョンが低いのが原因
node.js 10.7.0を使って、gulpをもう一度実行します。

[vagrant@localhost front]$ node -v
v0.10.48
[vagrant@localhost front]$ nvm use 10.7.0
-bash: nvm: コマンドが見つかりません
[vagrant@localhost front]$ source ~/.nvm/nvm.sh
[vagrant@localhost front]$ nvm ls
-> v10.7.0
system
default -> 10.7.0 (-> v10.7.0)
node -> stable (-> v10.7.0) (default)
stable -> 10.7 (-> v10.7.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/carbon (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.14.3 (-> N/A)
lts/carbon -> v8.11.3 (-> N/A)
[vagrant@localhost front]$ nvm use 10.7.0
Now using node v10.7.0 (npm v6.1.0)
[vagrant@localhost front]$ node -v
v10.7.0
[vagrant@localhost front]$ gulp
[21:12:57] Using gulpfile ~/local/front/gulpfile.js
[21:12:57] Starting ‘html’…
[21:12:57] Finished ‘html’ after 14 ms
[21:12:57] Starting ‘img’…
[21:12:57] Finished ‘img’ after 7.34 ms
[21:12:57] Starting ‘default’…
[21:12:57] Finished ‘default’ after 40 μs
[21:13:01] gulp-imagemin: Minified 1 image (saved 1.48 kB – 11.1%)

OK!

で、何やるのって、sassのコンパイルをgulpで自動化したいのでござる。

npmでインストールします。

sudo npm config set strict-ssl false
sudo npm i -D gulp-imagemin
sudo npm config set strict-ssl true

入りました。

gulp.task defaultでmsgであとに実行したい処理を書いて、そのgulp, taskでfunctionの前に呼び出す。

var gulp = require('gulp');

gulp.task('html', function(){
	return gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
});

gulp.task('msg', ['html'], function(){
	console.log('hello');
});

gulp.task('default', ['msg']);

[vagrant@localhost front]$ gulp
[20:15:16] Using gulpfile ~/local/front/gulpfile.js
[20:15:16] Starting ‘html’…
[20:15:16] Finished ‘html’ after 14 ms
[20:15:16] Starting ‘msg’…
hello
[20:15:16] Finished ‘msg’ after 40 μs
[20:15:16] Starting ‘default’…
[20:15:16] Finished ‘default’ after 10 μs

var gulp = require('gulp');

gulp.task('hello', function(){
	console.log('hello world');
});

gulp.task('default', ['hello']);

[vagrant@localhost front]$ gulp
[20:04:00] Using gulpfile ~/local/front/gulpfile.js
[20:04:00] Starting ‘hello’…
hello world
[20:04:00] Finished ‘hello’ after 126 μs
[20:04:00] Starting ‘default’…
[20:04:00] Finished ‘default’ after 13 μs

copy & paste は.srcと.pipe

var gulp = require(‘gulp’);

gulp.task(‘html’, function(){
gulp.src(‘./src/*.html’)
.pipe(gulp.dest(‘./dest’))
});

gulp.task(‘default’, [‘html’]);
[/html]

gulpfile.js

var gulp = require('gulp');

gulp.task('hello', function(){
	console.log('hello world');
});

[vagrant@localhost front]$ gulp hello
[17:18:28] Using gulpfile ~/local/front/gulpfile.js
[17:18:28] Starting ‘hello’…
hello world
[17:18:28] Finished ‘hello’ after 77 μs

おおお、なんかすげー。gulp.taskでタスクを書いていくようですね。

sudo npm config set strict-ssl false
sudo npm install –save-dev gulp
sudo npm config set strict-ssl true

package.json

{
  "name": "front",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD",
  "devDependencies": {
    "gulp": "~3.9.1"
  }
}

ちなみに、node.modulesがなくてもnpm installでpackage.jsonの中身をインストールすることができる。

[vagrant@localhost front]$ 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: (front) front
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD)
About to write to /home/vagrant/local/front/package.json:

{
“name”: “front”,
“version”: “0.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “BSD”
}

Is this ok? (yes)

[vagrant@localhost front]$ ls
package.json

package.jsonが入りました。中身を観ると、コマンドラインと一緒ですね。

{
  "name": "front",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD"
}