gulpを使用してlessを編集する方法
gulpとは
gulpは自動化構築ツールであり、構築ツールは煩雑な作業を簡単化し、開発者の作業効率を高めることができ、フロントエンド開発者にとって、私たちは通常gulpでファイルを統合し、ファイルを圧縮し、lessとsassファイルをコンパイルするなどします.
インストールgulp
gulpはnodeに基づいて実装されているので、nodeをインストールする必要があります.
開くhttps://nodejs.org/緑色のINSTALLボタンをクリックしてnodeをダウンロードしてインストールします.
npmはnodeのパッケージ管理ツールで、gulpに必要なパッケージをインストールすることができます.(nodeのインストール時にnpmが自動的にインストールされました)
コマンドラインに入力
インストールに失敗した場合は、cnpmインストール(npmの国内加速ミラー)を使用します.
npmを用いてグローバルな(
インストールに失敗した場合は、管理者権限を使用して
インストール時にコマンドラインのプロンプトに注意してください.インストールが完了したら、コマンドラインに
gulpを使用してlessをコンパイルする方法
すべてのサンプルコードをダウンロードしたり、オンラインでコードを表示したりすることができます.
gulp-lessにアクセスして、より多くの使い方を確認できます.
参考資料
gulp入門ガイド
gulpは自動化構築ツールであり、構築ツールは煩雑な作業を簡単化し、開発者の作業効率を高めることができ、フロントエンド開発者にとって、私たちは通常gulpでファイルを統合し、ファイルを圧縮し、lessとsassファイルをコンパイルするなどします.
インストールgulp
gulpはnodeに基づいて実装されているので、nodeをインストールする必要があります.
開くhttps://nodejs.org/緑色のINSTALLボタンをクリックしてnodeをダウンロードしてインストールします.
npmはnodeのパッケージ管理ツールで、gulpに必要なパッケージをインストールすることができます.(nodeのインストール時にnpmが自動的にインストールされました)
コマンドラインに入力
npm install -g gulp
インストールに失敗した場合は、cnpmインストール(npmの国内加速ミラー)を使用します.
npmを用いてグローバルな(
-g
)gulpパッケージをインストールする.インストールに失敗した場合は、管理者権限を使用して
sudo npm install -g gulp
を入力してインストールします.(パスワードの入力が要求される場合があります)インストール時にコマンドラインのプロンプトに注意してください.インストールが完了したら、コマンドラインに
gulp -v
を入力してインストールが成功したことを確認できます.gulpを使用してlessをコンパイルする方法
すべてのサンプルコードをダウンロードしたり、オンラインでコードを表示したりすることができます.
// gulp
var gulp = require('gulp')
// gulp-less
var less = require('gulp-less')
// less
// gulp images
gulp.task('less', function () {
// 1. less
gulp.src('less/**.less')
// 2. css
.pipe(less())
// 3.
.pipe(gulp.dest('dist/css'))
});
// gulp auto
gulp.task('auto', function () {
// , images
gulp.watch('less/**.less', ['less'])
})
// gulp.task('default')
// gulp less auto
gulp.task('default', ['less', 'auto'])
gulp-lessにアクセスして、より多くの使い方を確認できます.
参考資料
gulp入門ガイド