質問編集履歴

3

ソースコードをわかりやすくしました。

2016/07/02 05:54

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,8 @@
16
16
 
17
17
  ・gulpfile.js
18
18
 
19
+ ```ここに言語を入力
20
+
19
21
  //gulpfile.js
20
22
 
21
23
  var gulp = require('gulp'); //gulpをインポート
@@ -66,6 +68,8 @@
66
68
 
67
69
  });
68
70
 
71
+ ```
72
+
69
73
 
70
74
 
71
75
 
@@ -96,6 +100,8 @@
96
100
 
97
101
 
98
102
 
103
+ ```ここに言語を入力
104
+
99
105
  //gulpfile.js
100
106
 
101
107
  var gulp = require('gulp'); //gulpをインポート
@@ -144,6 +150,8 @@
144
150
 
145
151
 
146
152
 
153
+ ```
154
+
147
155
  //以下gulp-watch
148
156
 
149
157
  gulp.task('watch', function(){
@@ -170,6 +178,8 @@
170
178
 
171
179
 
172
180
 
181
+ ```ここに言語を入力
182
+
173
183
  require('postcss-comment/hookRequire')
174
184
 
175
185
  var postcss = require('postcss')
@@ -200,6 +210,8 @@
200
210
 
201
211
  })
202
212
 
213
+ ```
214
+
203
215
 
204
216
 
205
217
 
@@ -208,6 +220,8 @@
208
220
 
209
221
 
210
222
 
223
+ ```ここに言語を入力
224
+
211
225
  var postcss = require('postcss-comment/hookRequire')
212
226
 
213
227
 
@@ -235,3 +249,5 @@
235
249
  console.log(result.css)
236
250
 
237
251
  })
252
+
253
+ ```

2

公式サイトのHook requireという部分がわからず行えていません。

2016/07/02 05:54

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -151,3 +151,87 @@
151
151
  gulp.watch('./src-before/*', ['css']);//監視したいファイルの相対パス
152
152
 
153
153
  });
154
+
155
+
156
+
157
+
158
+
159
+ ・公式サイトのHook requireという部分がわからず行えていません。
160
+
161
+ Hook requireとはgulpfile.jsのどこかに下記のソースをコピペするということでしょうか?
162
+
163
+ nodeは難しくてよくわかりません。
164
+
165
+
166
+
167
+ >>>
168
+
169
+ Hook require
170
+
171
+
172
+
173
+ require('postcss-comment/hookRequire')
174
+
175
+ var postcss = require('postcss')
176
+
177
+
178
+
179
+ var fs = require('fs')
180
+
181
+
182
+
183
+ var file = __dirname + '/inline.css'
184
+
185
+
186
+
187
+ postcss()
188
+
189
+ .process(
190
+
191
+ fs.readFileSync(file, 'utf8'),
192
+
193
+ { from: file }
194
+
195
+ )
196
+
197
+ .then(function (result) {
198
+
199
+ console.log(result.css)
200
+
201
+ })
202
+
203
+
204
+
205
+
206
+
207
+ Or:
208
+
209
+
210
+
211
+ var postcss = require('postcss-comment/hookRequire')
212
+
213
+
214
+
215
+ var fs = require('fs')
216
+
217
+
218
+
219
+ var file = __dirname + '/inline.css'
220
+
221
+
222
+
223
+ postcss()
224
+
225
+ .process(
226
+
227
+ fs.readFileSync(file, 'utf8'),
228
+
229
+ { from: file }
230
+
231
+ )
232
+
233
+ .then(function (result) {
234
+
235
+ console.log(result.css)
236
+
237
+ })

1

問題がおきない時のソースを追記

2016/07/02 05:34

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -71,3 +71,83 @@
71
71
 
72
72
 
73
73
  どこに問題があるかご存知ですか?
74
+
75
+
76
+
77
+
78
+
79
+ 下記の状態だと問題がおきないので、
80
+
81
+ var postcsscomment = require('postcss-comment');
82
+
83
+
84
+
85
+ var plugins = [
86
+
87
+ postcsscomment
88
+
89
+ ];
90
+
91
+ の記述を追加すると問題が起きて、削除すると起きないのはわかっています。
92
+
93
+ インストールと追記以外にも必須作業があるということでしょうか?
94
+
95
+
96
+
97
+
98
+
99
+ //gulpfile.js
100
+
101
+ var gulp = require('gulp'); //gulpをインポート
102
+
103
+ var postcss = require('gulp-postcss'); //gulp-postcssをインポート
104
+
105
+ var cssnext = require('postcss-cssnext'); //cssnextをインポート
106
+
107
+ var nested = require('postcss-nested');
108
+
109
+ var reporter = require('postcss-reporter'); //stylelintだけだとレポートが出力されない為
110
+
111
+ var csswring = require('csswring');
112
+
113
+ var calc = require('postcss-calc');
114
+
115
+ var postcssimport = require('postcss-import');
116
+
117
+
118
+
119
+ gulp.task('css', function () { //”css”タスクを登録
120
+
121
+ var plugins = [
122
+
123
+ cssnext, //一旦空の配列を作成
124
+
125
+ nested,
126
+
127
+ reporter,
128
+
129
+ calc,
130
+
131
+ csswring,
132
+
133
+ postcssimport
134
+
135
+ ];
136
+
137
+ return gulp.src('./src-before/*') //src-before下にある.cssファイルを指定
138
+
139
+ .pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう
140
+
141
+ .pipe(gulp.dest('./dest-after')); //生成されたCSSをdest-after下に配置
142
+
143
+ });
144
+
145
+
146
+
147
+ //以下gulp-watch
148
+
149
+ gulp.task('watch', function(){
150
+
151
+ gulp.watch('./src-before/*', ['css']);//監視したいファイルの相対パス
152
+
153
+ });