質問編集履歴

2 修正

may88seiji

may88seiji score 63

2018/06/19 17:15  投稿

gulp sassのコンパイルを早くする設定
### 前提・実現したいこと
sassファイルの量が多くなり、コンパイルに多量の時間がかかっています。
差分のみをコンパイルできるように設定を変更したいです。
gulpファイル設定の経験がなく、何かアドバイスをもらえると助かります。
### 該当のソースコード
```sass.js
// @file config.js
var path = require('path');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var sass = require("gulp-sass");
var minify = require('gulp-minify-css');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var concat = require('gulp-concat');
var bourbon = require('node-bourbon');
var neat = require('node-neat');
var config = require('../config').sass;
var dest = './gulp/dest'; // 出力先ディレクトリ
var src = './gulp/src'; // ソースディレクトリ
var pub = './public'
var relativeSrcPath = path.relative('.', src);
var current = process.cwd();
var spriteImageVersion = '20171206'; // スプライト画像キャッシュクリア用version
var cache = require('gulp-cached');
var progeny = require('gulp-progeny');
var fs = require('fs');
// themeをtheme.txtに追加しておく
var thmes_text = fs.readFileSync('./gulp/themes.txt', 'utf-8');
// ASPでサービスを追加するthemeを配列で取得
var themes = thmes_text.split(/\r\n|\r|\n/);
bourbon.with('./public/assets/stylesheets/', './gulp/assets/stylesheets/**/!(_)*.scss');
module.exports = {
 // 出力先の指定
 dest: dest,
 themes: themes,
 sass: {
   pc : {
     src: [
       src + '/stylesheets/pc/**/!(_)*.scss'
     ],
     dest: dest + '/stylesheets/pc/',
   },
   sp : {
     src: [
       src + '/stylesheets/sp/**/!(_)*.scss'
     ],
     dest: dest + '/stylesheets/sp/',
   },
   theme : {
     src: [
       src + '/stylesheets/themes/**/!(_)*.scss'
     ],
     dest: dest + '/stylesheets/themes/',
   },
   minify: true
 },
gulp.task("sass-pc", function() {
   gulp.src(config.pc.src)
     .pipe(plumber({
         errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ
     }))
     .pipe(sass({
       includePaths: neat.includePaths
     }))
     //.pipe(concat(config.output))
     .pipe(gulpif(config.minify, minify()))
     .pipe(gulp.dest(config.pc.dest));
});
 sprite: {
   pc : {
     src: [
       src + '/images/pc/sprite/**.png'
     ],
     destCss: src + '/stylesheets/pc',
     imgName: 'sprite_pc.png', //スプライトの画像
     imgPath: '/sprite_pc.png?' + spriteImageVersion //生成されるscssに記載されるパス
   },
   sp : {
     src: [
       src + '/images/sp/sprite/**.png'
     ],
     destCss: src + '/stylesheets/sp',
     imgName: 'sprite_sp.png', //スプライトの画像
     imgPath: '/sprite_sp.png?' + spriteImageVersion //生成されるscssに記載されるパス
   },
   spriteImageVersion: spriteImageVersion,
   src: src,
   destImg: pub + '/',
   cssName: '_sprite.scss', //生成されるscss
   cssFormat: 'scss' //フォーマット
 },
gulp.task("sass-sp", function() {
   gulp.src(config.sp.src)
     .pipe(plumber({
         errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ
     }))
     .pipe(sass({
       includePaths: neat.includePaths
     }))
     //.pipe(concat(config.output))
     .pipe(gulpif(config.minify, minify()))
     .pipe(gulp.dest(config.sp.dest));
});
 icons: {
   pc: {
     src: src + '/icons/pc/**',
     dest: dest + '/fonts/pc/'
   },
   sp: {
     src: src + '/icons/sp/**',
     dest: dest + '/fonts/sp/'
   }
 },
gulp.task("sass-theme", function() {
   gulp.src(config.theme.src)
     .pipe(plumber({
         errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ
     }))
     .pipe(sass({
       includePaths: neat.includePaths
     }))
     //.pipe(concat(config.output))
     .pipe(gulpif(config.minify, minify()))
     .pipe(gulp.dest(config.theme.dest));
});
 images: {
   src: src + '/images/**',
   dest: dest + '/images/'
 },
 // jsのビルド設定
 js: {
   pc: {
     src: src + '/javascripts/**',
     dest: dest + '/javascripts/pc/'
   },
   sp: {
     src: src + '/javascripts/**',
     dest: dest + '/javascripts/sp'
   },
   lib: {
     pc: {
       src: src + '/javascripts/pc/lib/**',
       dest: dest + '/javascripts/pc/lib/'
     },
     sp: {
       src: src + '/javascripts/sp/lib/**',
       dest: dest + '/javascripts/sp/lib/'
     },
     output: 'lib.bundle.js'
   },
   uglify: true
 },
 // webpackの設定
 webpack: {
   pc: {
     entry: {
       customer: src + '/javascripts/pc/customer.js',
       backend: src + '/javascripts/pc/backend.js'
     },
     output: {
       filename: '[name].bundle.js',
       publicPath: '/assets/pc/'
     },
     resolve: {
       extensions: ['', '.js'],
       root: [
           path.join(current, src + '/javascripts/pc/component'),
           path.join(current, src + '/javascripts/pc')
       ]
     },
     externals: { jquery: "jQuery" },
     module: {
         loaders: [
           { test: /\.html$/, loader: 'html?minimize' },
           { test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
           { test: /\.css$/, loaders: ['style-loader','css-loader'] }
         ]
     }
   },
   sp: {
     entry: {
       customer: src + '/javascripts/sp/customer.js'
     },
     output: {
       filename: '[name].js'
     },
     resolve: {
       extensions: ['', '.js'],
       root: [
           path.join(current, src + '/javascripts/common/lib'),
           path.join(current, src + '/javascripts/sp/lib'),
           path.join(current, src + '/javascripts/sp'),
           path.join(current, src + '/javascripts/pc')
       ]
     },
     externals: { jquery: "jQuery" },
     module: {
         loaders: [
           { test: /\.html$/, loader: 'html?minimize' },
           { test: /\.scss$/, loader: "style!css!sass?indentedSyntax=sass" }
         ]
     }
   }
 },
 watch: {
   js: relativeSrcPath + '/javascripts/**/**',
   sass: relativeSrcPath + '/stylesheets/**/**',
   images: relativeSrcPath + '/images/**/**'
 }
}
gulp.task('sass', ['sass-pc', 'sass-sp', 'sass-theme']);
```
### 参考
gulpでCSSの差分ビルド
https://qiita.com/73cha/items/270e2dc33c63292dd184
検索して上記のリンクを見つけました。こちらを実行すれば、良いのでしょうか...
なにぶんわからないことばかりですいません...
  • Sass

    289questions

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

  • gulp

    296questions

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

1 誤字

may88seiji

may88seiji score 63

2018/06/19 16:12  投稿

gulp sassのコンパイルを早くする設定
### 前提・実現したいこと
sassファイルの量が多くなり、コンパイルに多量の時間がかかっています。
差分のみをコンパイルできるように設定を変更したいです。
gulpファイル設定の経験がなく、お教えいただけると幸いです。
gulpファイル設定の経験がなく、何かアドバイスをもらえると助かります。
### 該当のソースコード
```sass.js
// @file config.js
var path = require('path');
var dest = './gulp/dest'; // 出力先ディレクトリ
var src = './gulp/src'; // ソースディレクトリ
var pub = './public'
var relativeSrcPath = path.relative('.', src);
var current = process.cwd();
var spriteImageVersion = '20171206'; // スプライト画像キャッシュクリア用version
var fs = require('fs');
// themeをtheme.txtに追加しておく
var thmes_text = fs.readFileSync('./gulp/themes.txt', 'utf-8');
// ASPでサービスを追加するthemeを配列で取得
var themes = thmes_text.split(/\r\n|\r|\n/);
module.exports = {
 // 出力先の指定
 dest: dest,
 themes: themes,
 sass: {
   pc : {
     src: [
       src + '/stylesheets/pc/**/!(_)*.scss'
     ],
     dest: dest + '/stylesheets/pc/',
   },
   sp : {
     src: [
       src + '/stylesheets/sp/**/!(_)*.scss'
     ],
     dest: dest + '/stylesheets/sp/',
   },
   theme : {
     src: [
       src + '/stylesheets/themes/**/!(_)*.scss'
     ],
     dest: dest + '/stylesheets/themes/',
   },
   minify: true
 },
 sprite: {
   pc : {
     src: [
       src + '/images/pc/sprite/**.png'
     ],
     destCss: src + '/stylesheets/pc',
     imgName: 'sprite_pc.png', //スプライトの画像
     imgPath: '/sprite_pc.png?' + spriteImageVersion //生成されるscssに記載されるパス
   },
   sp : {
     src: [
       src + '/images/sp/sprite/**.png'
     ],
     destCss: src + '/stylesheets/sp',
     imgName: 'sprite_sp.png', //スプライトの画像
     imgPath: '/sprite_sp.png?' + spriteImageVersion //生成されるscssに記載されるパス
   },
   spriteImageVersion: spriteImageVersion,
   src: src,
   destImg: pub + '/',
   cssName: '_sprite.scss', //生成されるscss
   cssFormat: 'scss' //フォーマット
 },
 icons: {
   pc: {
     src: src + '/icons/pc/**',
     dest: dest + '/fonts/pc/'
   },
   sp: {
     src: src + '/icons/sp/**',
     dest: dest + '/fonts/sp/'
   }
 },
 images: {
   src: src + '/images/**',
   dest: dest + '/images/'
 },
 // jsのビルド設定
 js: {
   pc: {
     src: src + '/javascripts/**',
     dest: dest + '/javascripts/pc/'
   },
   sp: {
     src: src + '/javascripts/**',
     dest: dest + '/javascripts/sp'
   },
   lib: {
     pc: {
       src: src + '/javascripts/pc/lib/**',
       dest: dest + '/javascripts/pc/lib/'
     },
     sp: {
       src: src + '/javascripts/sp/lib/**',
       dest: dest + '/javascripts/sp/lib/'
     },
     output: 'lib.bundle.js'
   },
   uglify: true
 },
 // webpackの設定
 webpack: {
   pc: {
     entry: {
       customer: src + '/javascripts/pc/customer.js',
       backend: src + '/javascripts/pc/backend.js'
     },
     output: {
       filename: '[name].bundle.js',
       publicPath: '/assets/pc/'
     },
     resolve: {
       extensions: ['', '.js'],
       root: [
           path.join(current, src + '/javascripts/pc/component'),
           path.join(current, src + '/javascripts/pc')
       ]
     },
     externals: { jquery: "jQuery" },
     module: {
         loaders: [
           { test: /\.html$/, loader: 'html?minimize' },
           { test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
           { test: /\.css$/, loaders: ['style-loader','css-loader'] }
         ]
     }
   },
   sp: {
     entry: {
       customer: src + '/javascripts/sp/customer.js'
     },
     output: {
       filename: '[name].js'
     },
     resolve: {
       extensions: ['', '.js'],
       root: [
           path.join(current, src + '/javascripts/common/lib'),
           path.join(current, src + '/javascripts/sp/lib'),
           path.join(current, src + '/javascripts/sp'),
           path.join(current, src + '/javascripts/pc')
       ]
     },
     externals: { jquery: "jQuery" },
     module: {
         loaders: [
           { test: /\.html$/, loader: 'html?minimize' },
           { test: /\.scss$/, loader: "style!css!sass?indentedSyntax=sass" }
         ]
     }
   }
 },
 watch: {
   js: relativeSrcPath + '/javascripts/**/**',
   sass: relativeSrcPath + '/stylesheets/**/**',
   images: relativeSrcPath + '/images/**/**'
 }
}
```
### 参考
gulpでCSSの差分ビルド
https://qiita.com/73cha/items/270e2dc33c63292dd184
検索して上記のリンクを見つけました。こちらを実行すれば、良いのでしょうか...
なにぶんわからないことばかりですいません...
  • Sass

    289questions

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

  • gulp

    296questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る