gulp-less gulpパッケージ処理less

シーケンス

lessについて:
Less(Leaner Style Sheetsの略)は、後方互換性のあるCSS拡張言語です.ここではLessの公式文書(中国語版)を示し、Less言語とJavaScriptを利用して開発されたLessスタイルをCSSスタイルに変換するためのLessを含む.jsツール.LessはCSS言語を拡張し,変数,ミキシング(mixin),演算,関数などを追加した.Lessは、サーバ側(Node.jsおよびRhinoプラットフォーム)でもクライアント(ブラウザ)でも実行できます.
gulp-lessには何がありますか?
gulp-less gulp自動化コンポーネントツールのプラグインで、lessファイルを処理してcssファイルを生産環境に提供するために使用されます.

gulp基本インストール

nodeがインストールされています.js+npm+git-bashのwindow x 64システムコンピュータインストールコマンド:

$ npm i -g gulp
$ mkdir css-project && cd css-project
$ npm init -y
$ npm i -D gulp

@小白:詳細なインストールテクニックgulpインストールと入門を参照してください

gulp単純パッケージ処理less

1.開発依存インストール

$ npm i -D gulp-less

2. gulpfile.js構成

const gulp = require('gulp')
const less = require('gulp-less')

gulp.task('less', function () {
    return gulp.src('./src/style/*.less')//            less  
        .pipe(less())//  less       less  css
        .pipe(gulp.dest('./dist/css'))//   “./dist/css”  
})

3.パッケージコマンド

$ gulp less

gulpパッケージ処理less(各主流ブラウザに対応)

1.開発依存

$ npm i -D gulp-less gulp-concat gulp-rename gulp-autoprefixer gulp-cssnano

gulp-cssnanoが好きでない場合は、gulp-cssminを使用して置き換えることができます.

2. gulpfile.js構成

const gulp = require('gulp')
const less = require('gulp-less')
const concat = require('gulp-concat')
const rename = require('gulp-rename')
const autoprefix = require('gulp-autoprefixer')
const cssnano = require('gulp-cssnano')

gulp.task('less-autoprefix', function () {
    return gulp.src('./src/style/*.less') //            less  
        .pipe(less()) //  less       less  css
        .pipe(concat('style.css')) //       ，    style.css
        .pipe(cssnano()) //    cssnano   autoprefix    ，      
        .pipe(autoprefix({ //              ，  ：-webkit-, -mo-
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(rename({ //    style.min.css
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css')) //   “./dist/css”  
})

3.パッケージコマンド

$ gulp less-autoprefix

友情のつながり

gulp-less gulp-cssmin gulp-rename gulp-concat gulp-autoprefixer gulp-sourcemaps gulp-cssnano

ご注目ありがとうございます。