質問編集履歴
1
ソースを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,4 +5,44 @@
|
|
|
5
5
|
を見ても英語で完全にはわからず翻訳してもそれらしい記述が見つかりません。
|
|
6
6
|
|
|
7
7
|
どなたか、ご存じないでしょうか？
|
|
8
|
-
初心者にもわかるように解説してくれる方お願いします。
|
|
8
|
+
初心者にもわかるように解説してくれる方お願いします。
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
私は下記のように使っているのですが、var cssnext = require('postcss-cssnext'); //cssnextをインポートと使っている場合は、結果的にどんなソースになるのでしょうか？
|
|
12
|
+
```ここに言語を入力
|
|
13
|
+
//gulpfile.js
|
|
14
|
+
var gulp = require('gulp'); //gulpをインポート
|
|
15
|
+
var postcssimport = require('postcss-import');
|
|
16
|
+
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
|
|
17
|
+
var cssnext = require('postcss-cssnext'); //cssnextをインポート
|
|
18
|
+
var nested = require('postcss-nested');
|
|
19
|
+
var csswring = require('csswring');
|
|
20
|
+
var calc = require('postcss-calc');
|
|
21
|
+
var customProperties = require("postcss-custom-properties");
|
|
22
|
+
var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える
|
|
23
|
+
|
|
24
|
+
gulp.task('css', function () { //”css”タスクを登録
|
|
25
|
+
var plugins = [
|
|
26
|
+
postcssimport,
|
|
27
|
+
cssnext, //一旦空の配列を作成
|
|
28
|
+
nested,
|
|
29
|
+
calc,
|
|
30
|
+
csswring,
|
|
31
|
+
customProperties,
|
|
32
|
+
customMedia
|
|
33
|
+
];
|
|
34
|
+
|
|
35
|
+
console.log( Array.isArray(plugins) );//pluginsの定義の後で、 !Array.isArray(plugins)の値がどうなってるかをログを取る為
|
|
36
|
+
|
|
37
|
+
return gulp.src(
|
|
38
|
+
['./src-before/*' , './src-before/*/*'],
|
|
39
|
+
{ base: 'src-before' }) //src-before下にある.cssファイルを指定
|
|
40
|
+
.pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう
|
|
41
|
+
.pipe(gulp.dest('./dest-after/css')); //生成されたCSSをdest-after下に配置
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
//以下gulp-watch
|
|
45
|
+
gulp.task('watch', function(){
|
|
46
|
+
gulp.watch(['src-before/*' , 'src-before/*/*' , 'src-before/*/*/*'], ['css']);//監視したいファイルの相対パス
|
|
47
|
+
});
|
|
48
|
+
```
|