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

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

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

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

Q&A

1回答

381閲覧

gulp sassのコンパイルを早くする設定

may88seiji

総合スコア79

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

0グッド

0クリップ

投稿2018/06/19 07:07

編集2018/06/19 08:15

前提・実現したいこと

sassファイルの量が多くなり、コンパイルに多量の時間がかかっています。
差分のみをコンパイルできるように設定を変更したいです。
gulpファイル設定の経験がなく、何かアドバイスをもらえると助かります。

該当のソースコード

sass.js

1var gulp = require('gulp'); 2var gulpif = require('gulp-if'); 3var sass = require("gulp-sass"); 4var minify = require('gulp-minify-css'); 5var plumber = require('gulp-plumber'); 6var notify = require('gulp-notify'); 7var concat = require('gulp-concat'); 8var bourbon = require('node-bourbon'); 9var neat = require('node-neat'); 10var config = require('../config').sass; 11 12var cache = require('gulp-cached'); 13var progeny = require('gulp-progeny'); 14 15bourbon.with('./public/assets/stylesheets/', './gulp/assets/stylesheets/**/!(_)*.scss'); 16 17gulp.task("sass-pc", function() { 18 gulp.src(config.pc.src) 19 .pipe(plumber({ 20 errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ 21 })) 22 .pipe(sass({ 23 includePaths: neat.includePaths 24 })) 25 //.pipe(concat(config.output)) 26 .pipe(gulpif(config.minify, minify())) 27 .pipe(gulp.dest(config.pc.dest)); 28}); 29 30gulp.task("sass-sp", function() { 31 gulp.src(config.sp.src) 32 .pipe(plumber({ 33 errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ 34 })) 35 .pipe(sass({ 36 includePaths: neat.includePaths 37 })) 38 //.pipe(concat(config.output)) 39 .pipe(gulpif(config.minify, minify())) 40 .pipe(gulp.dest(config.sp.dest)); 41}); 42 43gulp.task("sass-theme", function() { 44 gulp.src(config.theme.src) 45 .pipe(plumber({ 46 errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ 47 })) 48 .pipe(sass({ 49 includePaths: neat.includePaths 50 })) 51 //.pipe(concat(config.output)) 52 .pipe(gulpif(config.minify, minify())) 53 .pipe(gulp.dest(config.theme.dest)); 54}); 55 56gulp.task('sass', ['sass-pc', 'sass-sp', 'sass-theme']);

参考

gulpでCSSの差分ビルド
https://qiita.com/73cha/items/270e2dc33c63292dd184

検索して上記のリンクを見つけました。こちらを実行すれば、良いのでしょうか...

なにぶんわからないことばかりですいません...

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

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

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

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

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

guest

回答1

0

差分ビルドなのでそうではないかと感じます。

投稿2019/04/01 18:20

A_O_A

総合スコア26

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問