1. 概要
いきさつは、「HTML - Autoprefixer - トラブルシュート（v8flags json）」に書きました。
「npm-6.4」を使っていたつもりが、「npm-6.9」に上がっていて、
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
というメッセージが出力されるので、改めて、環境を作り直します。
で、いったん前の環境があるままやっていたら、めちゃめちゃになってしまったので、いちから作り直します。
何やらよくわからなくなったので（耄碌しているので、久々にやるとさっぱりわからない）、ほぼいちから構築だ。
2. 以前のバージョンを削除
以前につくったワークも含めて、手当たり次第に消してやるが・・・いったん、バックアップ。
「root」ユーザ権限で。
cd /usr
tar cvzf ユーザ名.tar.bz2 ユーザ名
圧縮しても 375 MB もありましたわ。
npm 以外も含め、いらなそうだったり、古そうなものを根こそぎ削除。
ログインユーザに戻って。
cd ~
rm -R .node-gyp
rm -R .npm
rm -R .sass-cache
rm -R css
rm -R npm6.4
rm -R npm6.9
rm -R scss
3. npm init
では、いちからやってみます。
> cd
> 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>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (ユーザ名) npm Enter
version: (1.0.0) Enter
description: Enter
git repository: Enter
keywords: Enter
author: Enter
license: (ISC) Enter
About to write to /home/ユーザ名/package.json:
{
"name": "npm",
"version": "1.0.0",
"main": "gulpfile.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4"
},
"description": ""
}
Is this OK? (yes) Enter
> npm install --save-dev gulp
・・・ 略 ・・・
+ gulp-sass@4.0.2
added 120 packages from 122 contributors and audited 6940 packages in 167.472s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
↑
この辺、なんかちょっと気になる
なんか言われるので言われるとおりにしてみる
> npm audit fix
・・・ 略 ・・・
Installed to /home/ユーザ名/node_modules/node-sass/vendor/freebsd-x64-67/binding.node
npm WARN npm@1.0.0 No description
npm WARN npm@1.0.0 No repository field.
added 11 packages from 12 contributors, removed 20 packages and updated 47 packages in 164.715s
fixed 14 of 20 vulnerabilities in 1930 scanned packages
1 package update for 6 vulns involved breaking changes
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
↑
--force かいな
> npm audit fix --force
npm WARN using --force I sure hope you know what you are doing. ← だってそう言ったのは、あなたじゃん
> fsevents@1.2.7 install /home/ユーザ名/node_modules/fsevents
> node install
↑
この２行はメッセージです
npm WARN npm@1.0.0 No description
npm WARN npm@1.0.0 No repository field.
+ gulp-sass@4.0.2
+ gulp@4.0.0
added 147 packages from 83 contributors, removed 82 packages and updated 35 packages in 17.12s
fixed 7 of 7 vulnerabilities in 1901 scanned packages
1 package update for 6 vulns involved breaking changes
(installed due to `--force` option)
> npm install --save-dev gulp-sass
npm WARN npm@1.0.0 No description
npm WARN npm@1.0.0 No repository field.
+ gulp-sass@4.0.2
updated 1 package and audited 7161 packages in 4.369s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
> npm install --save-dev gulp-autoprefixer
npm WARN npm@1.0.0 No description
npm WARN npm@1.0.0 No repository field.
+ gulp-autoprefixer@5.0.0
removed 3 packages, updated 5 packages and audited 7161 packages in 4.524s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
で、なんかうまく動かんのですよ。
で「/home/ユーザ名/npm」ディレクトリを作成して「npm install --save-dev gulp」以下を「npm audit fix --force」を覗いて、繰り返すのです。
4. 動かしてみる
「/home/ユーザ名/npm」でなんとか、環境は構築できたっぽいのですが・・・。
ひとつ上に置いてある、「gulpfile.js」を持ってきて、中身が大体、こんな感じなのですが。
var gulp = require("gulp"),
sass = require('gulp-sass'),
autoprefix = require("gulp-autoprefixer"),
sourcemaps = require('gulp-sourcemaps');
// 対応ブラウザ
var browserV = "last 4 versions";
gulp.task("default", function () {
gulp.src("/パス/ファイル名.scss")
.pipe(sass({ outputStyle: 'compressed'}))
.pipe(autoprefix({
browsers: [browserV],
cascade: false
}))
.pipe(gulp.dest("/パス"));
});
// 本サイト
gulp.task("exp", function () {
gulp.src("/パス/ファイル名.scss")
.pipe(sass({ outputStyle: 'expanded'}))
.pipe(autoprefix({
browsers: [browserV],
cascade: true
}))
.pipe(gulp.dest("/パス"));
});
タスク exp を実行してみますと。
> gulp exp
[14:17:20] Using gulpfile /home/ユーザ名/npm/gulpfile.js
[14:17:20] Starting 'exp'...
[14:17:20] The following tasks did not complete: exp
[14:17:20] Did you forget to signal async completion?
てなことを言われます。
5. gulpfile.js 更新
調べてみると、「gulp」の「バージョン 4」からだそうで
> gulp --version
CLI version 2.1.0
Local version 4.0.0
なるほど、確かに、「バージョン 4」。
てことで「gulp 4.0 にしました。 - cidermitaina」を参考にしますと。
わたしの設定例で言えば。
var gulp = require("gulp"),
sass = require('gulp-sass'),
autoprefix = require("gulp-autoprefixer"),
sourcemaps = require('gulp-sourcemaps');
// 対応ブラウザ
var browserV = "last 4 versions";
gulp.task("default", function () {
return gulp.src("/パス/ファイル名.scss")
.pipe(sass({ outputStyle: 'compressed'}))
.pipe(autoprefix({
browsers: [browserV],
cascade: false
}))
.pipe(gulp.dest("/パス"));
});
// 本サイト
gulp.task("exp", function () {
return gulp.src("/パス/ファイル名.scss")
.pipe(sass({ outputStyle: 'expanded'}))
.pipe(autoprefix({
browsers: [browserV],
cascade: true
}))
.pipe(gulp.dest("/パス"));
});
10、21行です。
関数に戻り値をつけてやればいいそうです。
確かにこの記述をいれると。
> gulp exp
[14:26:02] Using gulpfile /home/ユーザ名/npm/gulpfile.js
[14:26:02] Starting 'exp'...
[14:26:03] Finished 'exp' after 135 ms
うまく、実行できるようになりました。
