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

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

ただいまの
回答率

87.93%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,909

score 23

やりたいこと

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

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var babelify = require('babelify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var runSequence = require('run-sequence');

var ga2 = {
  src: './',
  pub: '../public/',
  assets: '../public/assets/',
  js: {
    src: './js/',
    pub: '../public/assets/js/'
  },
  css: {
    src: './css/',
    pub: '../public/assets/css/'
  },
  img: {
    src: './img/',
    pub: '../public/assets/img/'
  },
  html: {
    src: './html/',
    pub: '../public/'
  }
};

// scripts
gulp.task('watchify:ga2', function(){
  return compileJs({
    file: 'main.js',
    src: ga2.js.src,
    dest: ga2.js.pub
  });
});

gulp.task('watchify:gaModules', function(){
  return compileJs({
    file: 'ga-modules.js',
    src: ga2.js.src,
    dest: ga2.js.pub
  });
});

gulp.task('watchify:gaWidgets', function(){
  return compileJs({
    file: 'ga-widgets.js',
    src: ga2.js.src,
    dest: ga2.js.pub
  });
});

gulp.task('watchify:gaWidgetsDev', function(){
  return compileJs({
    file: 'ga-widgets-dev.js',
    src: ga2.js.src,
    dest: ga2.js.pub
  });
});

function compileJs(opt){
  var bundler = watchify(browserify({
    entries: [opt.src + opt.file],
    transform: ['babelify', 'coffeeify', 'browserify-shim'],
    cache: {},
    packageCache: {}
  }));

  function bundle(){
    return bundler
    .bundle()
    .on('error', handleErrors)
    .pipe(source(opt.file))
    .pipe($.duration('compiled ' + opt.file))
    .pipe(gulp.dest(opt.dest))
    .pipe($.connect.reload());
  }

  bundler.on('update', bundle);
  return bundle();
}

gulp.task('watchify', ['watchify:ga2', 'watchify:gaModules', 'watchify:gaWidgets', 'watchify:gaWidgetsDev']);
gulp.task('scripts:modules', function(){
  return gulp.src(ga2.js.src + 'page-modules/*.js')
  .pipe(gulp.dest(ga2.js.pub + 'modules/'))
  .pipe($.connect.reload());
});

// styles
gulp.task('styles:ga2', function(){
  return gulp.src(ga2.css.src + '**/*.{sass,scss}')
  .pipe($.sass({
    outputStyle: 'compact'
  })
  .on('error', handleErrors))
  .pipe($.autoprefixer({
    browsers: ['last 2 versions', 'iOS >= 7', 'Android >= 4', 'Explorer >= 9'],
    cascade: false
  }))
  .pipe(gulp.dest(ga2.css.pub))
  .pipe($.connect.reload());
});

// html
var configJson = require(ga2.html.src + 'config.json');
var jadePages = ga2.html.src + 'pages/**/*.jade';
var jadeTemplates = ga2.html.src + 'layouts/**/*.jade';

gulp.task('jade:page', function(){
  return gulp.src(jadePages)
  .pipe($.changed(ga2.html.pub, {
    extension: '.html'
  }))
  .pipe($.plumber({
    errorHandler: handleErrors
  }))
  .pipe($.jade({
    pretty: true,
    basedir: ga2.html.src,
    data: configJson
  }))
  .pipe(gulp.dest(ga2.html.pub));
});

gulp.task('jade:templates', function(){
  return gulp.src(jadePages)
  .pipe($.plumber({
    errorHandler: handleErrors
  }))
  .pipe($.jade({
    pretty: true,
    basedir: ga2.html.src,
    data: configJson
  }))
  .pipe(gulp.dest(ga2.html.pub));
});

gulp.task('html', ['jade:page']);
gulp.task('html:templates', ['jade:templates']);
gulp.task('html:json', function(){
  return gulp.src(ga2.html.pub + '_api/*.html')
  .pipe($.htmlToJson())
  .pipe(gulp.dest(ga2.html.pub + '_api/'));
});

var jsonFiles = [
  'head-notifier',
  'ranking-mo',
  'ga-comment_01',
  'ga-comment_02',
  'ga-comment-post_01',
  'ga-comment-post_02',
  'pm-lk_comment-01',
  'pm-lk_comment-02',
  'pm-tw-list'
];

gulp.task('json:merge', function(){
  var filename, i, len, results;
  results = [];
  for(i = 0, len = jsonFiles.length; i < len; i++){
    filename = jsonFiles[i];
    results.push(gulp.src(ga2.html.pub + '_api/' + filename + '*.json')
    .pipe($.extend(filename + '.json'))
    .pipe(gulp.dest(ga2.html.pub + '_api/')));
  }
  return results;
});

gulp.task('json:api', function(){
  return runSequence('html:json', 'json:merge');
});
gulp.task('html', function(){
  return runSequence('jade:page', 'json:api');
});
gulp.task('html:templates', function(){
  return runSequence('jade:templates', 'json:api');
});

// image
gulp.task('image:svg', function(){
  return gulp.src(ga2.img.pub + '**/*.svg')
  .pipe($.svgmin())
  .pipe(gulp.dest(ga2.img.pub));
});

// minify
gulp.task('minify:scripts', function(){
  return gulp.src(ga2.assets + '**/*.js')
  .pipe($.uglify({
    preserveComments: 'some'
  }))
  .pipe(gulp.dest(ga2.assets));
});

gulp.task('minify:styles', function(){
  return gulp.src(ga2.assets + '**/*.css')
  .pipe($.cleanCss())
  .pipe(gulp.dest(ga2.assets));
});
gulp.task('minify', ['minify:scripts', 'minify:styles']);

// build
gulp.task('browserify:ga2', function(){
  browserify({
    entries: ['./js/main.js'],
    transform: ['babelify', 'coffeeify', 'browserify-shim'],
    cache: {},
    packageCache: {}
  })
  .bundle()
  .pipe(source('./js/main.js'))
  .pipe(gulp.dest('../public/assets/'));
});

gulp.task('browserify:modules', function(){
  browserify({
    entries: ['./js/ga-modules.js'],
    transform: ['babelify', 'coffeeify', 'browserify-shim'],
    cache: {},
    packageCache: {}
  })
  .bundle()
  .pipe(source('./js/ga-modules.js'))
  .pipe(gulp.dest('../public/assets/'));
});

gulp.task('build:js', ['browserify:ga2', 'browserify:modules', 'scripts:modules']);
gulp.task('build:sass', ['styles:ga2']);
gulp.task('build', ['build:sass', 'build:js']);

// web server
gulp.task('server', function(){
  $.connect.server({
    root: ga2.pub,
    port: 8000,
    livereload: true
  });
});

// watch
gulp.task('watch', function(){
  gulp.watch(ga2.js.src + 'page-modules/*.js', { interval: 750 }, ['scripts:modules']);
  gulp.watch(ga2.css.src + '**/*.{sass,scss}', { interval: 750 }, ['styles:ga2']);
  gulp.watch(jadePages, { interval: 750 }, ['html']);
  gulp.watch(jadeTemplates, { interval: 750 }, ['html:templates']);
  gulp.watch(ga2.html.pub + '_api/*.html', { interval: 750 }, ['json:api']);
  gulp.watch(ga2.pub + '**/*.html', { interval: 750 }, function(e){
    return gulp.src(e.path)
    .pipe($.connect.reload());
  });
});
gulp.task('default', ['server', 'watch', 'watchify']);

// utils
var handleErrors = function(){
  var args = Array.prototype.slice.call(arguments);
  $.notify.onError({
    title: 'Task Error',
    message: '<%= error %>'
  }).apply(this, args);
  return this.emit('end');
};
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sakura-shi

    2018/08/01 17:55

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/08/02 08:26

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

    キャンセル

  • sakura-shi

    2018/08/02 14:06 編集

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

    キャンセル

回答 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さんが自ら書いたものではなさそうですね?
どこかからコピーしてきたものでしょうか。
でしたら、そのコピー元も記載したほうが答えに近づくと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る