zukucode
主にWEB関連の情報を技術メモとして発信しています。

gulp lessをcssにコンパイルする

lessファイルをgulpを使ってcssにコンパイルします。

必要なパッケージをインストール

gulp-lessgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブラウザに対応する場合はあると便利です。

$ npm install --save-dev gulp-less gulp-autoprefixer

タスクは以下のようになります。

gulpfile.babel.js
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';

const $ = gulpLoadPlugins();

gulp.task('less', () => {
  return gulp.src('src/less/*.*') // ファイルは適宜変更してください
    .pipe($.less({ compress: true }))
    .pipe($.autoprefixer('> 1%'))
    .pipe(gulp.dest('dest'));
});

関連記事

  • gulp lessをcssにコンパイルする

    lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...


  • 静的サイトジェネレーターを自作してブログ作成システムを作成

    JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作してみようと思いました。以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。


  • nunjucks includeで絶対パスを指定する

    nunjucksの便利な機能の1つにincludeがあります。ファイルパスはデフォルトでは相対パスで設定されます。なのでメインとなるnjkファイルのパスによって以下のようになってしまいます。これではフ...


  • cssのcalcの設定をlessで記述するときの注意点

    cssで計算式を行うためのcalcをlessで同じように実装するには少し工夫が必要です。普通にcalcを指定すると、lessをコンパイルしたタイミングで計算が行われてしまいます。以下のようにダブルクォ...


  • gulp nunjucksをコンパイルしてhtmlに変換する

    nunjucksで記載されたテンプレートエンジンをhtmlに変換します。今回はnunjucksのコンパイルにgulp-nunjucks-renderを使用します。特に設定をしなくても正しく動作するので...


  • gulp 引数を受け取って開発時とリリース時で処理を分岐する

    コマンドラインでタスクを実行する際に、以下のようにパラメータを指定して、タスク処理では指定されたパラメータを受け取って処理を分岐するようにします。minimistを使えば上記の形式で指定したパラメータ...


  • less font-sizeをremで汎用的に使いこなす

    css3ではremという単位でルートの要素のサイズに対しての相対的な値を指定できるようになりました。その便利なremをlessのミックスインを使って便利に使いこなす方法を紹介します。フォントサイズはこ...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...