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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Grunt

Gruntは、JavaScriptで記述されたタスクを実行するアプリケーションです。タスクランナーと呼ばれる自動化ツールで、様々な作業を自動化して開発の効率を高めます。コマンド実行やファイル保存などの際の自動実行が可能です。

Q&A

解決済

1回答

2286閲覧

gulpでのコンパイル対象ファイルついて

yusukexyusuke

総合スコア52

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Grunt

Gruntは、JavaScriptで記述されたタスクを実行するアプリケーションです。タスクランナーと呼ばれる自動化ツールで、様々な作業を自動化して開発の効率を高めます。コマンド実行やファイル保存などの際の自動実行が可能です。

0グッド

2クリップ

投稿2015/11/18 00:46

宜しくお願い致します。

只今htmlのコーディングの仕事をgulpを使って、
haml の変換
scss の変換
imageの圧縮
等をwatchで監視しながら作業しております。

hamlのファイルが20ファイルくらいになってきて、
1ファイルを修正しただけで、
毎回20ファイルがコンパイルされるので、
ちょっとした修正の確認に時間がかかってしまっております。

gulpfileは以下になっております。
理想は変更があったファイルだけコンパイルしたいのですが、
うまい記述方法はありますでしょうか。
ご教示いただけますと幸いです。

どうぞ宜しくお願い致します。

javascript

1var autoprefixer = require('gulp-autoprefixer'), 2 cache = require('gulp-cache'), 3 concat = require('gulp-concat'), 4 connect = require('gulp-connect'), 5 del = require('del'), 6 gulp = require('gulp') 7 haml = require('gulp-haml'), 8 rubyhaml = require('gulp-ruby-haml'), 9 imagemin = require('gulp-imagemin'), 10 livereload = require('gulp-livereload'), 11 minifycss = require('gulp-minify-css'), 12 notify = require('gulp-notify'), 13 rename = require('gulp-rename'), 14 sass = require('gulp-ruby-sass'), 15 uglify = require('gulp-uglify'), 16 vendor = require('gulp-concat-vendor'); 17 plumber = require('gulp-plumber'); 18 19gulp.task('pages', function () { 20 return gulp.src('src/*.haml') 21 .pipe(plumber()) 22 .pipe(rubyhaml()) 23 .pipe(gulp.dest('dist/contents/mobile')) 24 .pipe(notify({ message: 'Hamls task complete' })); 25}); 26 27gulp.task('styles', function() { 28 return sass('src/styles', { sourcemap: false }) 29 .on('error', function (err) { console.log("ERROR: " + err.message); }) 30 .pipe(plumber()) 31 .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 32 .pipe(gulp.dest('dist/css/mobile/')) 33 .pipe(notify({ message: 'Styles task complete' })); 34}); 35 36gulp.task('scripts', function() { 37 return gulp.src('src/scripts/**/*.js') 38 .pipe(plumber()) 39 //.pipe(concat('main.js')) 40 //.pipe(gulp.dest('dist/js/mobile')) 41 //.pipe(rename({suffix: '.min'})) 42 //.pipe(uglify()) 43 .pipe(gulp.dest('dist/js/mobile')) 44 .pipe(notify({ message: 'Scripts task complete' })); 45}); 46 47gulp.task('images', function() { 48 return gulp.src('src/images/**/*') 49 .pipe(plumber()) 50 //.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 51 .pipe(gulp.dest('dist/img/mobile')) 52 .pipe(notify({ message: 'Images task complete' })); 53}); 54 55gulp.task('clean', function(cb) { 56 del(['dist', 'dist/css/mobile', 'dist/js/mobile', 'dist/img/mobile'], cb); 57}); 58 59gulp.task('watch', function() { 60 gulp.watch('src/*.haml', ['pages']); 61 gulp.watch('src/partials/*.haml', ['pages']); 62 gulp.watch('src/styles/**/*.scss', ['styles']); 63 gulp.watch('src/scripts/**/*.js', ['scripts']); 64 gulp.watch('src/images/**/*', ['images']); 65 66}); 67 68// Kick off 69//gulp.task('default', ['connect', 'watch', 'clean'], function() { 70gulp.task('default', ['watch', 'clean'], function() { 71 gulp.start('pages', 'styles', 'scripts', 'images'); 72}); 73

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

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

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

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

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

guest

回答1

0

ベストアンサー

gulp-cached あるいは類似のプラグインを利用することで、作業時間を短縮することができるかもしれません

簡単に調べてみましたが、何か参考になれば幸いです

Links

投稿2015/11/18 10:03

gouf

総合スコア2321

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

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

yusukexyusuke

2015/11/19 03:27

ご紹介いただいた方法で実現できました! かなり快適になってよかったですm(__)m ありがとうございましたm(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問