質問編集履歴
1
ソースを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -13,3 +13,83 @@
|
|
|
13
13
|
どなたか、ご存じないでしょうか？
|
|
14
14
|
|
|
15
15
|
初心者にもわかるように解説してくれる方お願いします。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
私は下記のように使っているのですが、var cssnext = require('postcss-cssnext'); //cssnextをインポートと使っている場合は、結果的にどんなソースになるのでしょうか？
|
|
22
|
+
|
|
23
|
+
```ここに言語を入力
|
|
24
|
+
|
|
25
|
+
//gulpfile.js
|
|
26
|
+
|
|
27
|
+
var gulp = require('gulp'); //gulpをインポート
|
|
28
|
+
|
|
29
|
+
var postcssimport = require('postcss-import');
|
|
30
|
+
|
|
31
|
+
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
|
|
32
|
+
|
|
33
|
+
var cssnext = require('postcss-cssnext'); //cssnextをインポート
|
|
34
|
+
|
|
35
|
+
var nested = require('postcss-nested');
|
|
36
|
+
|
|
37
|
+
var csswring = require('csswring');
|
|
38
|
+
|
|
39
|
+
var calc = require('postcss-calc');
|
|
40
|
+
|
|
41
|
+
var customProperties = require("postcss-custom-properties");
|
|
42
|
+
|
|
43
|
+
var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
gulp.task('css', function () { //”css”タスクを登録
|
|
48
|
+
|
|
49
|
+
var plugins = [
|
|
50
|
+
|
|
51
|
+
postcssimport,
|
|
52
|
+
|
|
53
|
+
cssnext, //一旦空の配列を作成
|
|
54
|
+
|
|
55
|
+
nested,
|
|
56
|
+
|
|
57
|
+
calc,
|
|
58
|
+
|
|
59
|
+
csswring,
|
|
60
|
+
|
|
61
|
+
customProperties,
|
|
62
|
+
|
|
63
|
+
customMedia
|
|
64
|
+
|
|
65
|
+
];
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
console.log( Array.isArray(plugins) );//pluginsの定義の後で、 !Array.isArray(plugins)の値がどうなってるかをログを取る為
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
return gulp.src(
|
|
74
|
+
|
|
75
|
+
['./src-before/*' , './src-before/*/*'],
|
|
76
|
+
|
|
77
|
+
{ base: 'src-before' }) //src-before下にある.cssファイルを指定
|
|
78
|
+
|
|
79
|
+
.pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう
|
|
80
|
+
|
|
81
|
+
.pipe(gulp.dest('./dest-after/css')); //生成されたCSSをdest-after下に配置
|
|
82
|
+
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
//以下gulp-watch
|
|
88
|
+
|
|
89
|
+
gulp.task('watch', function(){
|
|
90
|
+
|
|
91
|
+
gulp.watch(['src-before/*' , 'src-before/*/*' , 'src-before/*/*/*'], ['css']);//監視したいファイルの相対パス
|
|
92
|
+
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
```
|