【メモ】5分で導入できる！ タスクランナーGulp
▪︎参考URL
http://ics-web.jp/lab/archives/3290
node.jsダウンロード
ターミナルで確認
Node Package Managerバージョン確認
nmp -v
作業フォルダをターミナルにドラック＆ドロップ
対象フォルダにjsonファイルを作成
▪︎参考URL
npmでnode.jsのpackageを管理する - Qiita
npm init
Gulpをインストールする
▪︎参考URL
ビルドツール「gulp.js」を使ってみる | MONSTER DIVE【モンスターダイブ】
sudo npm i -g gulp
sassはrubyも使っているので確認
※macはデフォルトで入っている
▪︎参考URL
そろそろ整理しておきたい、Gemコマンドの使い方 - ばくのエンジニア日誌
gem -v
sassをインストール
sudo gem install sass
指定したフォルダにjsファイルとして書き出しを行うためのgulpfile.jsを作成
▪︎参考URL
▪︎js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
常に更新sassファイルに更新がかかるとコンパイルするタスクが走るwatchをインストール
gulp sass:watch
watchを停止はターミナルで
▪︎参考URL
» GulpでSassのコンパイルとlivereloadをやってみる | isee ウェブに関するブログ
control+C
ターミナルログ
Last login: Mon Jul 6 22:12:52 on console
iidzuka-no-MacBook-Pro:~ iizuka_yuki$ nmp -v
-bash: nmp: command not found
iidzuka-no-MacBook-Pro:~ iizuka_yuki$ npm -v
2.11.2
iidzuka-no-MacBook-Pro:~ iizuka_yuki$ cd /Users/iizuka_yuki/Desktop/test
iidzuka-no-MacBook-Pro:test iizuka_yuki$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fields
and exactly what they do.Use `npm install <pkg> --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: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/iizuka_yuki/Desktop/test/package.json:{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
iidzuka-no-MacBook-Pro:test iizuka_yuki$ sudo npm i -D gulp
Password:
npm WARN package.json test@1.0.0 No description
npm WARN package.json test@1.0.0 No repository field.
npm WARN package.json test@1.0.0 No README data
gulp@3.9.0 node_modules/gulp
├── pretty-hrtime@1.0.0
├── interpret@0.6.3
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.1
├── tildify@1.1.0 (os-homedir@1.0.0)
├── v8flags@2.0.9 (user-home@1.1.1)
├── semver@4.3.6
├── chalk@1.1.0 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, has-ansi@2.0.0, strip-ansi@3.0.0)
├── orchestrator@0.3.7 (sequencify@0.0.7, stream-consume@0.1.0, end-of-stream@0.1.5)
├── liftoff@2.1.0 (extend@2.0.1, rechoir@0.6.1, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.2.1)
├── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, beeper@1.1.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, object-assign@3.0.0, replace-ext@0.0.1, vinyl@0.5.0, lodash.template@3.6.2, multipipe@0.1.2, through2@2.0.0, dateformat@1.0.11)
└── vinyl-fs@0.3.13 (graceful-fs@3.0.8, strip-bom@1.0.0, vinyl@0.4.6, defaults@1.0.2, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
iidzuka-no-MacBook-Pro:test iizuka_yuki$ npm install gulp-sass -D
npm WARN package.json test@1.0.0 No description
npm WARN package.json test@1.0.0 No repository field.
npm WARN package.json test@1.0.0 No README data
|
> node-sass@3.2.0 install /Users/iizuka_yuki/Desktop/test/node_modules/gulp-sass/node_modules/node-sass
> node scripts/install.jsBinary downloaded and installed at /Users/iizuka_yuki/Desktop/test/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-14/binding.node
> node-sass@3.2.0 postinstall /Users/iizuka_yuki/Desktop/test/node_modules/gulp-sass/node_modules/node-sass
> node scripts/build.js` /Users/iizuka_yuki/Desktop/test/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-14/binding.node ` exists.
testing binary.
Binary is fine; exiting.
gulp-sass@2.0.3 node_modules/gulp-sass
├── object-assign@2.1.1
├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, beeper@1.1.0, object-assign@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.1.0, lodash.template@3.6.2, vinyl@0.5.0, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.11)
└── node-sass@3.2.0 (get-stdin@4.0.1, async-foreach@0.1.3, chalk@1.1.0, nan@1.8.4, mkdirp@0.5.1, meow@3.3.0, gaze@0.5.1, npmconf@2.1.2, glob@5.0.13, request@2.58.0, sass-graph@2.0.0, pangyp@2.2.1)
iidzuka-no-MacBook-Pro:test iizuka_yuki$ gulp sass
-bash: gulp: command not found
iidzuka-no-MacBook-Pro:test iizuka_yuki$ sudo npm i - g gulp
Password:
npm WARN package.json test@1.0.0 No description
npm WARN package.json test@1.0.0 No repository field.
npm WARN package.json test@1.0.0 No README data
npm ERR! addLocal Could not install /Users/iizuka_yuki/Desktop/test/-
npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "i" "-" "g" "gulp"
npm ERR! node v0.12.6
npm ERR! npm v2.11.2
npm ERR! path /Users/iizuka_yuki/Desktop/test/-
npm ERR! code ENOENT
npm ERR! errno -2npm ERR! enoent ENOENT, open '/Users/iizuka_yuki/Desktop/test/-'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoentnpm ERR! Please include the following file with any support request:
npm ERR! /Users/iizuka_yuki/Desktop/test/npm-debug.log
iidzuka-no-MacBook-Pro:test iizuka_yuki$ sudo npm i -g gulp
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp/bin/gulp.js
gulp@3.9.0 /usr/local/lib/node_modules/gulp
├── pretty-hrtime@1.0.0
├── interpret@0.6.3
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.1
├── tildify@1.1.0 (os-homedir@1.0.0)
├── v8flags@2.0.9 (user-home@1.1.1)
├── chalk@1.1.0 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── semver@4.3.6
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── liftoff@2.1.0 (extend@2.0.1, rechoir@0.6.1, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.2.1)
├── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, beeper@1.1.0, object-assign@3.0.0, replace-ext@0.0.1, vinyl@0.5.0, lodash.template@3.6.2, multipipe@0.1.2, through2@2.0.0, dateformat@1.0.11)
└── vinyl-fs@0.3.13 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.2, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
iidzuka-no-MacBook-Pro:test iizuka_yuki$ gulp sass
[22:40:23] Using gulpfile ~/Desktop/test/gulpfile.js
[22:40:23] Starting 'sass'...
[22:40:23] Finished 'sass' after 9.71 ms
Error in plugin 'sass'
Message:
sass/style.scss
4:9 invalid property name
iidzuka-no-MacBook-Pro:test iizuka_yuki$ gem -v
2.0.14
iidzuka-no-MacBook-Pro:test iizuka_yuki$ gem install sass
Fetching: sass-3.4.15.gem (100%)
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.
iidzuka-no-MacBook-Pro:test iizuka_yuki$ sudo gem install sass
Password:
Fetching: sass-3.4.15.gem (100%)
Successfully installed sass-3.4.15
Parsing documentation for sass-3.4.15
Installing ri documentation for sass-3.4.15
1 gem installed
iidzuka-no-MacBook-Pro:test iizuka_yuki$ gulp sass
[22:45:12] Using gulpfile ~/Desktop/test/gulpfile.js
[22:45:12] Starting 'sass'...
[22:45:12] Finished 'sass' after 10 ms
Error in plugin 'sass'
Message:
sass/style.scss
4:9 invalid property name
iidzuka-no-MacBook-Pro:test iizuka_yuki$ gulp sass
[22:46:00] Using gulpfile ~/Desktop/test/gulpfile.js
[22:46:00] Starting 'sass'...
[22:46:00] Finished 'sass' after 10 ms
iidzuka-no-MacBook-Pro:test iizuka_yuki$ gulp sas:;watch
[22:49:37] Using gulpfile ~/Desktop/test/gulpfile.js
[22:49:37] Task 'sas:' is not in your gulpfile
[22:49:37] Please check the documentation for proper gulpfile formatting
-bash: watch: command not found
iidzuka-no-MacBook-Pro:test iizuka_yuki$ gulp sass:watch
[22:50:18] Using gulpfile ~/Desktop/test/gulpfile.js
[22:50:18] Starting 'sass:watch'...
[22:50:18] Finished 'sass:watch' after 12 ms
[22:50:51] Starting 'sass'...
[22:50:51] Finished 'sass' after 15 ms
[22:55:02] Starting 'sass'...
[22:55:02] Finished 'sass' after 4.76 ms
