Menggunakan PostCSS dipadu dengan Sass, Stylus, atau LESS

() translation by (you can also view the original English article)

Jika Anda tertarik menggunakan PostCSS, tetapi Anda masih menyukai preprocessor favorit Anda, jangan khawatir. Anda tidak perlu membuat pilihan di antara keduanya - Anda dapat menggunakannya berdampingan satu sama lain.

Ada beberapa plugin PostCSS yang memuji preprocessors dengan sangat baik, karena mereka menambahkan fungsionalitas ke dalam alur kerja Anda yang seharusnya tidak mungkin, atau setidaknya lebih sulit, hanya menggunakan preprocessor.

Kami akan mencoba beberapa plugin gratis ini, kemudian kami akan melalui panduan penyiapan untuk menunjukkan kepada Anda cara menggunakan PostCSS berdampingan dengan Sass, Stylus, atau LESS.

Mengapa menggunakan keduanya?

Sebelum kami memahami bagaimana Anda dapat menggunakan preprocessor bersama dengan PostCSS, kami akan membahas sedikit tentang mengapa Anda menginginkannya. Jawaban singkatnya adalah: untuk mendapatkan akses ke plugin PostCSS yang fungsinya melengkapi preprocessors. Untuk menunjukkan kepada Anda mengapa ini berharga, kami akan membahas beberapa plugin yang bekerja sangat baik dengan preprocessors.

Catatan: dimungkinkan untuk mencapai hasil akhir yang serupa dengan menggunakan mixin dan fungsi dalam kode preprocessor biasa, tetapi dengan masing-masing contoh di bawah ini proses ditangani secara otomatis. Anda menulis CSS Anda secara normal dan plugin menangani segalanya untuk Anda, tanpa fungsi untuk dipanggil, tidak ada mixin yang disertakan, atau argumen yang harus dilewati.

autoprefixer

Ada banyak mixin preprocessor yang ditulis untuk menangani penyisipan awalan vendor. Misalnya, Anda mungkin telah menggunakan @include box-sizing(border-box); dari pustaka Kompas ke aturan vendor keluaran box-sizing.

Masalah dengan mengandalkan mixin untuk awalan vendor adalah:

Pertama-tama Anda harus tahu properti membutuhkan awalan sebelum Anda dapat memutuskan untuk menerapkan mixin untuknya.
Anda harus tahu nama mixin yang terkait dan cara menggunakannya.
Anda harus mengawasi kapan awalan vendor tidak lagi diperlukan untuk setiap properti (saya tahu saya sudah awalan box-sizing untuk cara panjang ...)

Autoprefixer menghilangkan masalah ini dengan menangani proses awalan vendor prefixing automatically. Autoprefixer memindai CSS Anda, mengeceknya terhadap data dari CanIUse.com, lalu menambahkan awalan yang diperlukan.

Baca lebih lanjut tentang Autoprefixer di: https://github.com/postcss/autoprefixer

rtlcss

Menghasilkan baik default dan RTL (right to left) stylesheet dari satu sumber juga sesuatu yang telah dilakukan dengan preprosesor, tetapi biasanya membutuhkan penggunaan beberapa mixins dan / atau interpolasi variabel ke dalam kode Anda di beberapa tempat. Misalnya, daripada menulis margin-left: 1rem; Anda mungkin perlu menulis margin-#{dir}: 1rem; atau @include margin-left( 1rem );.

Dengan plugin rtlcss oleh Mohammad Younes, Anda tidak perlu menggunakan mixins atau interpolasi variabel, Anda hanya menulis stylesheet seperti biasa dan plugin akan menemukan semua instance atau "right" atau "left" dan menukarnya di sekitar. Jadi margin-left: 1rem; otomatis menjadi margin-right: 1rem; tanpa Anda harus menulis kode khusus untuk mewujudkannya.

Baca lebih lanjut tentang rtlcss di: https://github.com/MohammadYounes/rtlcss

postcss-colorblind

Dengan plugin postcss-colorblind oleh Brian Holt, Anda dapat secara otomatis menghasilkan berbagai versi stylesheet yang memberi Anda pengalaman langsung tentang bagaimana desain Anda akan terlihat bagi orang yang buta warna. Ini dapat mensimulasikan delapan jenis colorblindness yang berbeda, membantu Anda mendapatkan pemahaman yang benar-benar kuat tentang seberapa mudahnya skema warna Anda.

Ini adalah contoh fungsi yang Anda benar-benar harus pergi ke PostCSS untuk menemukan, karena akan sangat sulit bagi preprocessors untuk mencapainya.

Baca lebih lanjut tentang postcss-buta warna di: https://github.com/btholt/postcss-colorblind

postcss-svgo

Plugin postcss-svgo oleh Ben Briggs dapat memberikan Anda optimasi gratis dari kode SVG sebaris. Misalnya ini:

background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="50" cy="50" r="40" fill="yellow" /></svg>');

Dapat diringkas menjadi ini, kurang dari setengah kode:

1	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#ff0"/></svg>');

Baca lebih lanjut tentang postcss-svgo di: https://github.com/ben-eb/postcss-svgo

cssnano

Sementara preprosesor dapat menghapus spasi dan komentar, paket cssnano oleh Ben Briggs dapat melakukan semua jenis pengoptimalan di atas dan di luar dua langkah ini. Kami membahas cssnano secara detail dalam tutorial Untuk Minifikasi dan Pengoptimalan.

Baca lebih lanjut tentang cssnano di: https://github.com/ben-eb/cssnano

postcss-font-magician

Plugin postcss-font-magician oleh Jonathan Neal membuat penambahan font kustom semudah menggunakan font biasa. Anda tidak perlu menggunakan mixin apa pun, cukup tambahkan aturan font-family seperti biasanya:

1	body {
2	font-family: "Alice";
3	}

... dan pengaya akan menangani pembuatan penuh @font-face untuk Anda:

@font-face {
   font-family: "Alice";
   font-style: normal;
   font-weight: 400;
   src: local("Alice"), local("Alice-Regular"),
        url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"),
        url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"),
        url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff")  format("woff"),
        url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf")   format("truetype")
}

body {
  font-family: "Alice";
}

Baca lebih lanjut tentang postcss-font-penyihir di: https://github.com/jonathantneal/postcss-font-magician

Pengaturan Proyek

Ada enam panduan panduan di bawah ini: Gulp dan Grunt guide untuk setiap preprocessor utama. Tidak perlu membaca keenamnya, Anda dapat langsung melompat ke panduan untuk preprocessor yang Anda inginkan dan membuat alat. Jika Anda tidak yakin apakah akan menggunakan Gulp atau Grunt, Gulp jelas merupakan pilihan yang lebih sederhana untuk tutorial ini.

Untuk panduan apa pun yang Anda ikuti, Anda harus memulai dengan proyek Gulp atau Grunt kosong. Anda dapat membaca tentang bagaimana untuk setup menelan atau kasar proyek untuk PostCSS dalam tutorial sebelumnya

masing-masing.

Jika Anda tidak ingin secara manual menyiapkan proyek dari awal, Anda dapat mengunduh file sumber yang dilampirkan ke tutorial ini, dan ekstrak proyek starter Gulp atau Grunt yang tersedia ke dalam folder proyek kosong. Kemudian dengan terminal atau command prompt menunjuk folder menjalankan perintah npm install.

Pasang(Install) Plugin PostCSS Ke dalam Proyek Anda

Setelah Anda menyiapkan proyek kosong untuk salah satu bagian di bawah ini, Anda juga perlu memasang dua plugin PostCSS: Autoprefixer dan cssnano. Anda dapat melakukannya dengan menjalankan perintah:

1	npm install autoprefixer cssnano --save-dev

Kami akan menggunakan dua plugin ini untuk menguji bahwa PostCSS dan preprocessor Anda bekerja sama seperti yang diharapkan.

Preprocess sebelum PostCSS

Aturan pertama menggunakan preprocessor dengan PostCSS adalah Anda harus selalu menjalankan preprocessor tersebut terlebih dahulu. Ini karena Anda tidak ingin memiliki sintaks khusus preprocessor apa pun dalam kode Anda yang mungkin menghambat plugin PostCSS, dan Anda juga tidak ingin PostCSS membuat perubahan pada kode Anda yang mungkin mencegah preprocessor berjalan seperti yang diharapkan.

PostCSS Plugins dan "Kode Pengujian PostCSS"

Untuk masing-masing preprosesor yang kita atur, kita akan memiliki mereka menjalankan autoprefixer dan cssnano setelah preprocessor selesai kompilasi. Pada masing-masing kasus, kita perlu menambahkan beberapa kode pengujian untuk dua plugin ini untuk beroperasi.

Untuk menyimpan pengulangan kode yang sama di setiap bagian di bawah ini, ketika Anda melihat instruksi yang memberitahu Anda untuk menambahkan kode pengujian PostCSS Anda, tambahkan ini ke file sumber preprocessor yang Anda kerjakan:

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* cssnano will remove this comment */
  display: flex;
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
	margin-right: 2.5rem;
	font-weight: normal;
	padding: 1.75rem;
	width: calc(50rem - (2 * 1.75rem));
}

Jika berhasil, kode yang dikompilasi Anda akan dalam setiap kasus keluar sebagai:

1	.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Catatan: penggunaan flexbox telah diperbaiki secara otomatis, dan cssnano telah melakukan beberapa pengoptimalan kode. Kami menggunakan kode yang sama untuk menguji cssnano seperti yang kami lakukan di tutorial For Minification and Optimization sebelumnya, jadi silakan lihat bagian 'cssnano' di dalamnya untuk detail tentang pengoptimalan yang dilakukan.

1. Sass + PostCSS

Karena Anda sudah bekerja dengan Node.js untuk menjalankan Gulp atau Grunt dan PostCSS, cara termudah untuk menggunakan Sass bersama mereka adalah melakukannya melalui LibSass. Hal ini juga jauh lebih cepat daripada Ruby Sass. Kami akan menerapkan LibSass melalui modul gulp-sass atau modul grunt-contrib-sass.

Penyiapan melalui Gulp

Instal modul gulp-sass ke dalam proyek Anda dengan npm install gulp-sass --save-dev.

Sekarang Anda dapat memperbarui Gulpfile Anda sebagai berikut:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

Mari kita jabarkan apa yang telah kita ubah dari Gulpfile starter default:

Menambahkan variabel untuk memuat gulp-sass, autoprefixer dan cssnano
Menambahkan variabel autoprefixer dan cssnano ke array processors
Mengedit ekstensi file pada file sumber yang kami kompilasi ke '.scss' alih-alih '.css'
Menambahkan pipa () baru, .pipe (sass () ..., untuk memproses Sass, pastikan untuk menempatkannya sebelum garis yang memproses PostCSS

Sekarang kita dapat menjalankan beberapa tes untuk memastikan Sass dan PostCSS mengumpulkan seperti yang diharapkan.

Tes Preprocessor

Ubah nama file “src / style.css” Anda yang sudah ada menjadi “src / style.scss” dan tambahkan kode tes berikut ini:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Jalankan gulp css dan Anda akan melihat file “style.css” baru muncul di folder “dest” Anda dengan isinya:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333; }

Uji PostCSS

Sekarang, tambahkan kode pengujian PostCSS yang disediakan sebelumnya dalam tutorial ini ke file “style.scss” Anda.

Jalankan perintah gulp css Anda dan Anda akan melihat kode yang benar muncul di file 'dest / style.css' Anda:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Setup melalui Grunt

Ke proyek Grunt baru Anda, instal modul grunt-contrib-sass dengan npm install grunt-contrib-sass.

Kemudian tambahkan fungsi grunt.loadNpmTasks () untuknya di bawah yang ada yang Anda miliki untuk PostCSS:

1	grunt.loadNpmTasks('grunt-postcss');
2	grunt.loadNpmTasks('grunt-contrib-sass');

Anda sekarang perlu menyiapkan tugas baru untuk memproses Sass. Setelah baris ini:

1	grunt.initConfig({

... tetapi sebelum tugas postcss yang ada, tambahkan kode ini:

    sass: {
      dist: {
        files: {
          'src/style.css': 'src/style.scss'
        }
      }
    },

Sekarang kami akan mendaftarkan tugas yang akan menjalankan Sass dan kemudian PostCSS. Setelah grunt.loadNpmTasks () fungsi yang baru saja Anda sisipkan, tambahkan:

1	grunt.registerTask('css', ['sass', 'postcss']);

Tes Preprocessor

Untuk menguji konfigurasi Anda, mengubah nama file "src/style.css" Anda ada untuk "style.scss". Tambahkan kode Sass ini padanya:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Jalankan perintah grunt css dan Anda akan melihat file baru yang dibuat di folder "dest" Anda bernama "style.css" dan berisi kode ini:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333; }

Pengaturan PostCSS

Kami sekarang akan menjalankan plugin Autoprefixer dan cssnano kami. Perbarui susunan processors Gruntfile Anda ke yang berikut:

1	processors: [
2	require('autoprefixer')(),
3	require('cssnano')()
4	]

Uji PostCSS

Menambahkan kode uji PostCSS ke file "style.scss", jalankan perintah css mendengus lagi dan Anda harus menemukan file recompiled "dest/style.css" Anda sekarang berisi autoprefixed benar dan dioptimalkan kode.

2. stylus + PostCSS

Stylus dan PostCSS bekerja dengan sangat baik bersama-sama berkat pembuatan paket PostStylus oleh Sean King, yang menggabungkan pemrosesan Stylus dan PostCSS. Jika Anda seorang pengembang Stylus, Anda cukup menambahkan PostStylus ke proses kompilasi Anda dan segera memiliki akses untuk menggunakan plugin PostCSS sebagai bagian dari alur kerja Anda.

PostStylus: https://github.com/seaneking/poststylus

Penyiapan melalui Gulp

Jika Anda menggunakan Gulpfile premade dari proyek awal, Anda akan diperhatikan menggunakan plugin gulp-postcss. Ini sebenarnya hanya di sana karena diperlukan untuk proses penyiapan Sass dan LESS, tetapi untuk Stylus, kami tidak memerlukannya karena kami menggunakan PostStylus sebagai kompilator kami.

Anda dapat menghapusnya dari proyek Anda dengan npm uninstall gulp-postcss --save-dev, dan hapus baris ini dari Gulpfile Anda:

1	var postcss = require('gulp-postcss');

Sekarang kita dapat menginstal dua plugin yang kita butuhkan untuk kompilasi Stylus dan PostCSS, dengan menjalankan perintah:

1	npm install gulp-stylus poststylus --save-dev

Perbarui Gulpfile Anda menjadi:

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var poststylus = require('poststylus');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.styl')
		.pipe(stylus({
			use: [
				poststylus(processors)
			]
		}))
		.pipe(gulp.dest('./dest'));
});

Berikut adalah apa yang kita lakukan di atas:

Tambahkan variabel untuk memuat gulp-stylus, poststylus, autoprefixer dan cssnano
Menambahkan variabel autoprefixer dan cssnano ke array processors
Mengedit ekstensi file pada file sumber yang kami kompilasi ke '.styl' alih-alih '.css'
Menghapus baris .pipe () yang membaca .pipe (postcss (prosesor))
Menggantinya dengan .pipe (stylus ({..., untuk mengatur modul gulp-stylus dan poststylus untuk menangani kompilasi kami

Uji Preprocessor

Sekarang kami siap menguji kompilasi. Di folder “src” Anda, ganti nama “style.css” menjadi “style.styl” dan tambahkan tes ini kode Stylus:

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

Jalankan perintah gulp css dan Anda akan melihat file “style.css” muncul di folder “dest” Anda dengan konten ini:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333;
4	}

Uji PostCSS

Tambahkan kode pengujian PostCSS yang diberikan sebelumnya ke file “style.styl” Anda, memastikan hanya indentasi tab yang ada di kode yang ditempelkan, bukan spasi.

Mengkompilasi ulang, dan periksa apakah Anda memiliki output yang sesuai dalam file “dest / style.css” Anda.

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Setup melalui Grunt

Seperti halnya dengan proyek Gulp untuk Stylus, compiler PostCSS default yang datang dengan proyek starter tidak diperlukan, berada di sana murni untuk proses penyiapan Sass dan LESS. Anda dapat menghapusnya dari proyek Anda dengan npm uninstall grunt-postcss --save-dev.

Sekarang kita dapat menginstal grunt-contrib-stylus dan poststylus dengan perintah:

1	npm install grunt-contrib-stylus poststylus --save-dev

Kami tidak lagi akan menggunakan grunt-postcs, jadi cari baris ini:

1	grunt.loadNpmTasks('grunt-postcss');

Dan ganti dengan:

1	grunt.loadNpmTasks('grunt-contrib-stylus');

Mengingat kami tidak menggunakan grunt-postcs, itu artinya kami tidak lagi membutuhkan tugas postcs yang telah kami tetapkan di dalam grunt.initConfig ({...}) ;. Hapus konfigurasi tugas itu dan gantilah dengan tugas stylus baru ini:

    stylus: {
      compile: {
        options: {
        },
        files: {
          'dest/style.css': 'src/style.styl'
        }
      }
    }

Uji Preprocessor

Sekarang kami siap menguji kompilasi. Di folder “src” Anda, ganti nama “style.css” menjadi “style.styl” dan tambahkan tes ini kode Stylus:

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

Jalankan command grunt stylus dan Anda akan melihat file “style.css” muncul di folder “dest” Anda dengan konten ini:

1	body{font:100% Helvetica,sans-serif;color:#333}

Pengaturan PostCSS

Untuk menambahkan plugin PostCSS kami ke dalam proses kompilasi, pertama-tama kita perlu menambahkan kode ini ke bagian paling atas Gruntfile kami, di atas garis module.exports ...:

1	var poststylus = function() {
2	return require('poststylus')(['autoprefixer', 'cssnano'])
3	};

Ini adalah dimana Anda akan memuat setiap plugin PostCSS yang ingin Anda gunakan, bukan dalam sebuah array prosesor Anda akan digunakan untuk dari tutorial kami yang lain.

Kemudian temukan objek options di dalam tugas stylus, dan perbarui ke yang berikut:

1	options: {
2	use: [poststylus]
3	},

Ini memberitahu grunt-contrib-stylus untuk menggunakan poststylus selama kompilasi, dan pluginnya bersama dengan itu.

Uji PostCSS

Tambahkan “kode pengujian PostCSS” ke file “src / style.styl” Anda, jalankan stylus penggerutu, dan Anda akan melihat konten berikut yang ditulis ke dalam file “dest / style.css” Anda:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

3. LESS + PostCSS

Setup melalui Gulp

Instal modul gulp-less ke dalam proyek Anda dengan npm install gulp-less --save-dev.

Sekarang Anda dapat memperbarui Gulpfile Anda ke yang berikut:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var less = require('gulp-less');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.less')
		.pipe(less())
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

Mari kita jabarkan apa yang telah kita ubah dari Gulpfile starter default:

Menambahkan variabel untuk memuat gulp-less, autoprefixer dan cssnano
Menambahkan variabel autoprefixer dan cssnano ke array processors
Mengedit ekstensi file pada file sumber yang kami kompilasi ke “.less” alih-alih “.css”
Added .pipe (less ()) untuk memproses LESS, pastikan untuk menempatkannya sebelum baris yang memproses PostCSS

Uji Preprocessor

Sekarang kita dapat menjalankan beberapa tes untuk memastikan baik LESS dan PostCSS dikompilasi seperti yang diharapkan.

Ganti nama file “src/style.css” yang ada menjadi “src/style.less” dan tambahkan kode tes berikut ini:

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Jalankan gulp css dan Anda akan melihat file “style.css” baru muncul di folder “dest” Anda dengan isinya:

1	body{font:100% Helvetica,sans-serif;color:#333}

Uji PostCSS

Sekarang, untuk file “style.less” Anda tambahkan kode pengujian PostCSS yang disediakan sebelumnya dalam tutorial ini.

Jalankan perintah gulp css Anda dan Anda akan melihat kode yang benar sekarang muncul di file “dest/style.css” Anda.

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Setup melalui Grunt

Ke dalam proyek Grunt baru Anda, instal modul yang kurang mendengus-kurang dengan npm install grunt-contrib-less, kemudian tambahkan fungsi grunt.loadNpmTasks () untuknya di bawah yang ada yang Anda miliki untuk PostCSS:

1	grunt.loadNpmTasks('grunt-postcss');
2	grunt.loadNpmTasks('grunt-contrib-less');

Anda sekarang harus menyiapkan tugas baru untuk memproses LESS. Setelah baris ini:

1	grunt.initConfig({

... tetapi sebelum tugas postcss yang ada, tambahkan kode ini:

    less: {
      production: {
        files: {
          'src/style.css': 'src/style.less'
        }
      }
    },

Sekarang kami akan mendaftarkan tugas, untuk menjalankan LESS dan kemudian PostCSS. Setelah grunt.loadNpmTasks () fungsi yang baru saja Anda sisipkan, tambahkan:

1	grunt.registerTask('css', ['less', 'postcss']);

Uji Preprocessor

Untuk menguji pengaturan Anda, ganti nama file “src/style.css” Anda “style.less”. Tambahkan kode LESS ini ke:

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Jalankan perintah grunt css dan Anda akan melihat file baru yang dibuat di folder 'dest' Anda bernama “style.css” dan berisi kode ini:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333333;
4	}

Siapkan PostCSS

Sekarang kami akan menambahkan plugin PostCSS kami ke dalam aliran kompilasi. Perbarui susunan processors Gruntfile Anda ke yang berikut:

1	processors: [
2	require('autoprefixer')(),
3	require('cssnano')()
4	]

Uji PostCSS

Tambahkan kode pengujian PostCSS ke file “style.less” Anda, jalankan perintah grunt css lagi dan Anda akan menemukan file “dest/style.css” yang dikompilasi ulang sekarang berisi kode autoprefixed dan optimal yang benar:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Di Tutorial Berikutnya

Selanjutnya, kami akan memeriksa sesuatu yang hampir dapat Anda anggap sebagai jenis berbeda dari preprocessing – menggunakan PostCSS untuk kelas CSS yang memenuhi standar BEM / SUIT yang dihasilkan secara otomatis. Proses ini membuat pengembangan BEM / SUIT jauh lebih mudah untuk melacak, belum lagi lebih efisien.

Sampai jumpa di tutorial selanjutnya!