質問編集履歴

1

gulpのソースを追加しました

2016/12/01 10:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -102,4 +102,126 @@
102
102
 
103
103
 
104
104
 
105
- ・トランスパイル前のpostcssはafterのカレントディレクトリにあります。
105
+ ・トランスパイル前のpostcssはdest-afterフォルダと同じディレクトリないにあります。
106
+
107
+
108
+
109
+
110
+
111
+ ソース
112
+
113
+ ```ここに言語を入力
114
+
115
+ //gulpfile.js
116
+
117
+ var gulp = require('gulp'); //gulpをインポート
118
+
119
+ var postcssimport = require('postcss-import');
120
+
121
+ var postcss = require('gulp-postcss'); //gulp-postcssをインポート
122
+
123
+ var cssnext = require('postcss-cssnext'); //cssnextをインポート
124
+
125
+ var nested = require('postcss-nested');
126
+
127
+ var csswring = require('csswring');
128
+
129
+ var calc = require('postcss-calc');
130
+
131
+ var customProperties = require("postcss-custom-properties");
132
+
133
+ var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える
134
+
135
+ var browserSync = require('browser-sync').create();
136
+
137
+
138
+
139
+ gulp.task('default', function () { //”css”タスクを登録
140
+
141
+ var plugins = [
142
+
143
+ postcssimport,
144
+
145
+ cssnext, //一旦空の配列を作成
146
+
147
+ nested,
148
+
149
+ calc,
150
+
151
+ csswring,
152
+
153
+ customProperties,
154
+
155
+ customMedia,
156
+
157
+ browserSync
158
+
159
+ ];
160
+
161
+
162
+
163
+ //ローカルサーバーを立て、
164
+
165
+ //ファイル更新時に自動リロードするタスクです
166
+
167
+ gulp.task("default", function () {
168
+
169
+ //初期設定です
170
+
171
+ browserSync.init({
172
+
173
+ server: {
174
+
175
+ baseDir: "./" // このディレクトリをルートとしたサーバを立ち上げることができる。
176
+
177
+ }
178
+
179
+ });
180
+
181
+ });
182
+
183
+
184
+
185
+ gulp.watch ("../src-before/foundation/*", function () { // ./**に変更があったら下記のブラウザシンクを更新してくれ
186
+
187
+ browserSync.reload();
188
+
189
+ });
190
+
191
+
192
+
193
+
194
+
195
+ console.log( Array.isArray(plugins) );//pluginsの定義の後で、 !Array.isArray(plugins)の値がどうなってるかをログを取る為
196
+
197
+
198
+
199
+ return gulp.src(
200
+
201
+ ['./src-before/*' , './src-before/*/*'],
202
+
203
+ { base: 'src-before' }) //src-before下にある.cssファイルを指定
204
+
205
+ .pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう
206
+
207
+ .pipe(gulp.dest('./dest-after/css')); //生成されたCSSをdest-after下に配置
208
+
209
+ });
210
+
211
+ ```
212
+
213
+
214
+
215
+ ・ちなみに下記コマンドはdest-afterフォルダをカレントとして実行しているので、
216
+
217
+ dest-after>browser-sync start --server --files "../src-before/foundation/*, index.html"
218
+
219
+
220
+
221
+
222
+
223
+ baseDir: "./" も
224
+
225
+ gulp.watch ("../src-before/foundation/*", function ()も
226
+
227
+ 両方ともdest-afterをカレントとして相対パスを記載すればよいのですよね?