質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

899閲覧

gulpでのコンパイルができない

sakura-shi

総合スコア93

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/07/30 23:17

編集2018/08/02 05:05

#やりたいこと
windows10の環境で、sassファイルをコンパイルしcssファイルとjsファイルに変更を加えたい

#環境
Node バージョン v8.11.3
sass バージョン Ruby Sass 3.5.66
OS windows10

インストール
npm install --msvs_version=2015
npm install --global gulp
npm install smooth-scroll

#現状
・gulpfile.jsのあるディレクトリでgulpを実行 → jsファイルのみ更新される
・gulpコマンドを実行しても、いっこうに終わる気配がないためコントロール+Cでプロンプトにもどらざるをえない
・gulpfile.coffeeファイルが見当たらない

#やってみたこと1
npm uninstall gulp-sass
npm install gulp-sass --save-dev
その後も、cssファイルは更新されない

#やってみたこと2
gulpと実行し、そのままの状態で、sassファイルに修正を加えるとcssファイルの更新日が変わることが確認できました。これは正しい手順でしょうか???

■gulpfile.js

js

1var gulp = require('gulp'); 2var $ = require('gulp-load-plugins')(); 3var browserify = require('browserify'); 4var babelify = require('babelify'); 5var watchify = require('watchify'); 6var source = require('vinyl-source-stream'); 7var runSequence = require('run-sequence'); 8 9var ga2 = { 10 src: './', 11 pub: '../public/', 12 assets: '../public/assets/', 13 js: { 14 src: './js/', 15 pub: '../public/assets/js/' 16 }, 17 css: { 18 src: './css/', 19 pub: '../public/assets/css/' 20 }, 21 img: { 22 src: './img/', 23 pub: '../public/assets/img/' 24 }, 25 html: { 26 src: './html/', 27 pub: '../public/' 28 } 29}; 30 31// scripts 32gulp.task('watchify:ga2', function(){ 33 return compileJs({ 34 file: 'main.js', 35 src: ga2.js.src, 36 dest: ga2.js.pub 37 }); 38}); 39 40gulp.task('watchify:gaModules', function(){ 41 return compileJs({ 42 file: 'ga-modules.js', 43 src: ga2.js.src, 44 dest: ga2.js.pub 45 }); 46}); 47 48gulp.task('watchify:gaWidgets', function(){ 49 return compileJs({ 50 file: 'ga-widgets.js', 51 src: ga2.js.src, 52 dest: ga2.js.pub 53 }); 54}); 55 56gulp.task('watchify:gaWidgetsDev', function(){ 57 return compileJs({ 58 file: 'ga-widgets-dev.js', 59 src: ga2.js.src, 60 dest: ga2.js.pub 61 }); 62}); 63 64function compileJs(opt){ 65 var bundler = watchify(browserify({ 66 entries: [opt.src + opt.file], 67 transform: ['babelify', 'coffeeify', 'browserify-shim'], 68 cache: {}, 69 packageCache: {} 70 })); 71 72 function bundle(){ 73 return bundler 74 .bundle() 75 .on('error', handleErrors) 76 .pipe(source(opt.file)) 77 .pipe($.duration('compiled ' + opt.file)) 78 .pipe(gulp.dest(opt.dest)) 79 .pipe($.connect.reload()); 80 } 81 82 bundler.on('update', bundle); 83 return bundle(); 84} 85 86gulp.task('watchify', ['watchify:ga2', 'watchify:gaModules', 'watchify:gaWidgets', 'watchify:gaWidgetsDev']); 87gulp.task('scripts:modules', function(){ 88 return gulp.src(ga2.js.src + 'page-modules/*.js') 89 .pipe(gulp.dest(ga2.js.pub + 'modules/')) 90 .pipe($.connect.reload()); 91}); 92 93// styles 94gulp.task('styles:ga2', function(){ 95 return gulp.src(ga2.css.src + '**/*.{sass,scss}') 96 .pipe($.sass({ 97 outputStyle: 'compact' 98 }) 99 .on('error', handleErrors)) 100 .pipe($.autoprefixer({ 101 browsers: ['last 2 versions', 'iOS >= 7', 'Android >= 4', 'Explorer >= 9'], 102 cascade: false 103 })) 104 .pipe(gulp.dest(ga2.css.pub)) 105 .pipe($.connect.reload()); 106}); 107 108// html 109var configJson = require(ga2.html.src + 'config.json'); 110var jadePages = ga2.html.src + 'pages/**/*.jade'; 111var jadeTemplates = ga2.html.src + 'layouts/**/*.jade'; 112 113gulp.task('jade:page', function(){ 114 return gulp.src(jadePages) 115 .pipe($.changed(ga2.html.pub, { 116 extension: '.html' 117 })) 118 .pipe($.plumber({ 119 errorHandler: handleErrors 120 })) 121 .pipe($.jade({ 122 pretty: true, 123 basedir: ga2.html.src, 124 data: configJson 125 })) 126 .pipe(gulp.dest(ga2.html.pub)); 127}); 128 129gulp.task('jade:templates', function(){ 130 return gulp.src(jadePages) 131 .pipe($.plumber({ 132 errorHandler: handleErrors 133 })) 134 .pipe($.jade({ 135 pretty: true, 136 basedir: ga2.html.src, 137 data: configJson 138 })) 139 .pipe(gulp.dest(ga2.html.pub)); 140}); 141 142gulp.task('html', ['jade:page']); 143gulp.task('html:templates', ['jade:templates']); 144gulp.task('html:json', function(){ 145 return gulp.src(ga2.html.pub + '_api/*.html') 146 .pipe($.htmlToJson()) 147 .pipe(gulp.dest(ga2.html.pub + '_api/')); 148}); 149 150var jsonFiles = [ 151 'head-notifier', 152 'ranking-mo', 153 'ga-comment_01', 154 'ga-comment_02', 155 'ga-comment-post_01', 156 'ga-comment-post_02', 157 'pm-lk_comment-01', 158 'pm-lk_comment-02', 159 'pm-tw-list' 160]; 161 162gulp.task('json:merge', function(){ 163 var filename, i, len, results; 164 results = []; 165 for(i = 0, len = jsonFiles.length; i < len; i++){ 166 filename = jsonFiles[i]; 167 results.push(gulp.src(ga2.html.pub + '_api/' + filename + '*.json') 168 .pipe($.extend(filename + '.json')) 169 .pipe(gulp.dest(ga2.html.pub + '_api/'))); 170 } 171 return results; 172}); 173 174gulp.task('json:api', function(){ 175 return runSequence('html:json', 'json:merge'); 176}); 177gulp.task('html', function(){ 178 return runSequence('jade:page', 'json:api'); 179}); 180gulp.task('html:templates', function(){ 181 return runSequence('jade:templates', 'json:api'); 182}); 183 184// image 185gulp.task('image:svg', function(){ 186 return gulp.src(ga2.img.pub + '**/*.svg') 187 .pipe($.svgmin()) 188 .pipe(gulp.dest(ga2.img.pub)); 189}); 190 191// minify 192gulp.task('minify:scripts', function(){ 193 return gulp.src(ga2.assets + '**/*.js') 194 .pipe($.uglify({ 195 preserveComments: 'some' 196 })) 197 .pipe(gulp.dest(ga2.assets)); 198}); 199 200gulp.task('minify:styles', function(){ 201 return gulp.src(ga2.assets + '**/*.css') 202 .pipe($.cleanCss()) 203 .pipe(gulp.dest(ga2.assets)); 204}); 205gulp.task('minify', ['minify:scripts', 'minify:styles']); 206 207// build 208gulp.task('browserify:ga2', function(){ 209 browserify({ 210 entries: ['./js/main.js'], 211 transform: ['babelify', 'coffeeify', 'browserify-shim'], 212 cache: {}, 213 packageCache: {} 214 }) 215 .bundle() 216 .pipe(source('./js/main.js')) 217 .pipe(gulp.dest('../public/assets/')); 218}); 219 220gulp.task('browserify:modules', function(){ 221 browserify({ 222 entries: ['./js/ga-modules.js'], 223 transform: ['babelify', 'coffeeify', 'browserify-shim'], 224 cache: {}, 225 packageCache: {} 226 }) 227 .bundle() 228 .pipe(source('./js/ga-modules.js')) 229 .pipe(gulp.dest('../public/assets/')); 230}); 231 232gulp.task('build:js', ['browserify:ga2', 'browserify:modules', 'scripts:modules']); 233gulp.task('build:sass', ['styles:ga2']); 234gulp.task('build', ['build:sass', 'build:js']); 235 236// web server 237gulp.task('server', function(){ 238 $.connect.server({ 239 root: ga2.pub, 240 port: 8000, 241 livereload: true 242 }); 243}); 244 245// watch 246gulp.task('watch', function(){ 247 gulp.watch(ga2.js.src + 'page-modules/*.js', { interval: 750 }, ['scripts:modules']); 248 gulp.watch(ga2.css.src + '**/*.{sass,scss}', { interval: 750 }, ['styles:ga2']); 249 gulp.watch(jadePages, { interval: 750 }, ['html']); 250 gulp.watch(jadeTemplates, { interval: 750 }, ['html:templates']); 251 gulp.watch(ga2.html.pub + '_api/*.html', { interval: 750 }, ['json:api']); 252 gulp.watch(ga2.pub + '**/*.html', { interval: 750 }, function(e){ 253 return gulp.src(e.path) 254 .pipe($.connect.reload()); 255 }); 256}); 257gulp.task('default', ['server', 'watch', 'watchify']); 258 259// utils 260var handleErrors = function(){ 261 var args = Array.prototype.slice.call(arguments); 262 $.notify.onError({ 263 title: 'Task Error', 264 message: '<%= error %>' 265 }).apply(this, args); 266 return this.emit('end'); 267}; 268

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

teruri

2018/07/30 23:27

gulpfile.jsの中身はどんな感じですか?
sakura-shi

2018/08/01 08:52

gulpfile.jsはちょっとお待ちいただけますか?その後
sakura-shi

2018/08/01 08:55

その後、gulpと実行し、その次にsassファイルに修正を加えるとcssファイルの更新日が変わることが確認できました。この現象も理由がわかりません。試しに、sassファイルを修正後、gulpを実行するとcssのタイムスタンプは変わりません。これが正しい手順でしょうか?
退会済みユーザー

退会済みユーザー

2018/08/01 23:26

gulpfile.jsを記載しないと憶測では誰も回答できません。
sakura-shi

2018/08/02 05:06 編集

掲載しました よろしくお願いいたします
guest

回答1

0

ずばっと、
npm install gulp-sass --save
ってやってみてください。

今回は
gulp-load-plugins
を使っているので、
package.jsonの
dev-dependenciesじゃなくて
dependenciesに記載されていないといけません。


で、ちょっと解説というか補足というか。
いくつか問題があります。

1つ目はpackage.jsonも記載してください。
gulp-load-pluginsを使っているので
package.jsonのほうに問題がある可能性があります。

2つ目はこのgulpfile.jsは
kii-shiさんが自ら書いたものではなさそうですね?
どこかからコピーしてきたものでしょうか。
でしたら、そのコピー元も記載したほうが答えに近づくと思います。

投稿2018/08/03 01:22

teruri

総合スコア220

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問