Aliran kerja yang mudah ' y untuk sass

Takeaways Key

Aliran kerja Gulp dapat meningkatkan masa penyusunan SASS dalam projek rel besar, bergerak dari saluran paip aset dan merangkul kelajuan libsass.
Aliran kerja Gulp termasuk kompilasi sass dengan libsass, menghasilkan sourcemaps untuk debugging yang lebih mudah, prefixing CSS dengan autoprefixer, dan menghasilkan dokumentasi SASS dengan SASSDOC.
Aliran kerja boleh dioptimumkan lagi dengan menambahkan tugas menonton yang memantau perubahan dalam stylesheets untuk mengkompilasi semula mereka, menghapuskan keperluan untuk menjalankan tugas SASS secara manual selepas setiap fail menyimpan.
Tugas 'Prod' boleh diwujudkan untuk menggunakan pengeluaran, yang menyusun SASS dalam mod termampat, awalan CSS dengan autoprefixer, regenerasi dokumentasi SASSDOC, dan mengelakkan sebarang sourcemaps.

Saya baru -baru ini bertanggungjawab mengoptimumkan bahagian sass projek rel besar, dan salah satu perkara yang paling penting untuk dilakukan adalah untuk memperbaiki masa penyusunan. Kerana seni bina SASS di tempat dan fakta bahawa Ruby Sass (melalui saluran paip Aset Rails dalam kes ini) cenderung lambat apabila berurusan dengan sejumlah besar fail, ia boleh mengambil masa sehingga 40 saat untuk menyusun stylesheets. Bercakap tentang proses pembangunan yang cepat. :)

Idea saya adalah untuk bergerak dari saluran paip aset dan merangkul kelajuan libsass. Untuk membuat perkara lebih mudah, saya memutuskan untuk pergi dengan aliran kerja yang mudah. Ia adalah kali pertama saya menggunakan Gulp, dan saya mesti mengatakan ia adalah pengalaman yang menyeronokkan (yang tidak berlaku untuk Grunt sejauh yang saya bimbang).

Dalam artikel pendek ini, mari kita hanya melakukan lawatan cepat tentang bagaimana untuk menubuhkan aliran kerja Gulp'y untuk bekerja dengan Sass. Inilah yang akan kita sertakan:

tidak mengejutkan, kompilasi sass dengan libsass

• Menjana sourcemaps untuk debugging yang lebih mudah
• Prefixing CSS dengan AutoPrefixer
• Menjana dokumentasi SASS dengan SASSDOC
Menyusun sass

Tonton Atoz: Sass Belajar surat sass mengikut surat

Tonton kursus ini Tonton kursus ini

Perkara pertama yang perlu dilakukan ialah memasang kebergantungan dan membuat gulpfile.js. Kami akan memerlukan Gulp (No Shit, Sherlock), tetapi juga Gulp-sass untuk menyusun stylesheets kami:

Baris ini memberitahu NPM untuk memasang pakej Gulp dan Gulp-Sass sebagai kebergantungan pembangunan. Anda kini boleh mencari mereka dalam objek DevDependencies pakej.json anda. Dan gulpfile.js:

$ <span>npm install gulp gulp-sass --save-dev</span>

wow, itu pendek. Apa yang kita perlukan sekarang adalah tugas

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

untuk menjalankan sass (sebenarnya gulp-sass) di folder stylesheet kami.

$ <span>npm install gulp gulp-sass --save-dev</span>

Itu sahaja! Kami kini boleh menyusun stylesheet kami menggunakan libsass terima kasih kepada tugas yang sangat minimum. Bagaimana dengan itu? Kita boleh lulus pilihan untuk menelefon untuk menyusun stylesheets dalam mod diperluas dan mencetak kesilapan dalam konsol:

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

Menambah Sourcemaps

Setakat ini, begitu baik. Sekarang, bagaimana dengan menghasilkan sourcemaps? Sekiranya anda tidak tahu apa sourcemaps, ia pada dasarnya adalah cara untuk memetakan sumber pengeluaran termampat dengan sumber pembangunan yang diperluaskan untuk membuat debugging kod langsung lebih mudah. Mereka tidak terhad kepada CSS sama sekali, sourcemaps boleh digunakan dalam JavaScript juga.

Kami mempunyai artikel yang bagus mengenai sourcemaps di sini di Sitepoint. Jangan ragu untuk membacanya sebelum pergi jika anda merasa agak pendek mengenai pemahaman sourcemaps.

Baiklah, jadi untuk menambah generasi sourcemaps untuk tugas kita, kita perlu memasang gulp-sourcemaps:

<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>// Find all `.scss` files from the `stylesheets/` folder
</span>    <span>.src(input)
</span>    <span>// Run Sass on those files
</span>    <span>.pipe(sass())
</span>    <span>// Write the resulting CSS in the output folder
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Dan sekarang mari kita mengoptimumkan tugas kita:

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Secara lalai, Gulp-Sourcemaps menulis sourcemaps sejajar dalam fail CSS yang disusun. Bergantung pada persediaan projek, kami mungkin ingin menulisnya dalam fail yang berasingan, di mana kita dapat menentukan jalan yang relatif kepada destinasi gulp.dest () dalam fungsi sourcemaps.write () seperti:

$ <span>npm install gulp-sourcemaps --save-dev</span>

membawa autoprefixer ke parti

Saya tidak akan terperinci tentang mengapa menggunakan autoprefixer lebih baik daripada menulis vendor dengan tangan (atau dengan mixin yang pada dasarnya adalah perkara yang sama), tetapi kira-kira autoprefixer adalah langkah pasca pemprosesan yang bermaksud ia sebenarnya telah dikumpulkan Stylesheets untuk menambah awalan yang relevan berdasarkan pangkalan data terkini dan konfigurasi yang diberikan. Dalam erti kata lain, anda memberitahu AutoPrefixer yang pelayar yang anda ingin menyokong, dan ia hanya menambah awalan yang relevan ke stylesheets. Usaha sifar, sokongan sempurna (sila ingatkan saya untuk paten frasa tangkapan ini).

Untuk memasukkan autoprefixer dalam aliran kerja Gulp'y kami, kami hanya memerlukannya untuk paip selepas Sass telah melakukan perkara itu. Kemudian AutoPrefixer mengemas kini stylesheets untuk menambah awalan.

Pertama, mari pasangnya (anda dapatkan intipati sekarang):

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

maka kami menambahnya kepada tugas kami:

gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

sekarang, kami berlari dengan konfigurasi lalai dari AutoPrefixer yang

• pelayar dengan lebih daripada 1% bahagian pasaran,
• 2 versi terakhir semua pelayar,
• Firefox ESR,
• opera 12.1

kita boleh menggunakan konfigurasi kita sendiri seperti:

$ <span>npm install gulp-autoprefixer --save-dev</span>

Lepaskan dokumen!

alat terakhir, tetapi tidak kurang, untuk menambah alur kerja kami, generasi dokumentasi SASS dengan SASSDOC. SASSDOC adalah untuk menghidupkan JSDOC kepada JavaScript: alat dokumentasi. Ia menghancurkan stylesheet anda mencari blok komen yang mendokumentasikan pembolehubah, campuran, fungsi dan ruang letak.

Jika projek anda menggunakan sassdoc (ia sepatutnya!), Anda boleh menambah generasi dokumentasi automatik dalam aliran kerja anda.

Perkara yang sejuk dengan Sassdoc adalah bahawa ia boleh disalurkan secara langsung di Gulp kerana APInya bersesuaian. Jadi anda sebenarnya tidak mempunyai plugin Gulp-Sassdoc.

$ <span>npm install gulp gulp-sass --save-dev</span>

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

Perhatikan bahawa bergantung pada saiz projek anda dan bilangan item yang didokumenkan, Sassdoc boleh mengambil masa beberapa saat untuk dijalankan (jarang melebihi 3 sejauh yang saya perhatikan), jadi anda mungkin mahu mempunyai Tugas berasingan untuk ini.

<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>// Find all `.scss` files from the `stylesheets/` folder
</span>    <span>.src(input)
</span>    <span>// Run Sass on those files
</span>    <span>.pipe(sass())
</span>    <span>// Write the resulting CSS in the output folder
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Sekali lagi, kami menggunakan konfigurasi lalai tetapi kami boleh menggunakan sendiri jika kami mahu.

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Saya menonton anda

Masih ada sesuatu yang boleh kita lakukan sebelum meninggalkan: Membuat tugas menonton. Titik tugas ini adalah untuk melihat perubahan dalam stylesheets untuk mengkompilasi semula mereka lagi. Ia sangat mudah apabila bekerja di bahagian sass projek supaya anda tidak perlu menjalankan tugas SASS dengan tangan setiap kali anda menyimpan fail.

$ <span>npm install gulp-sourcemaps --save-dev</span>

Berikut adalah satu lagi sebab mengapa saya mengesyorkan tidak termasuk SASSDOC dalam tugas SASS: Anda mungkin tidak mahu menjana semula dokumen setiap kali anda menyentuh lembaran gaya. Ini mungkin sesuatu yang anda mahu lakukan untuk membina atau menolak, mungkin dengan cangkuk pra-komite.

Menambah sentuhan akhir

perkara terakhir, namun penting, untuk difikirkan: menjalankan sass dalam tugas lalai.

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Arahan yang diluluskan sebagai hujah kedua fungsi (..) fungsi adalah senarai tugas ketergantungan. Pada asasnya, ia memberitahu Gulp untuk menjalankan tugas -tugas tersebut sebelum menjalankan satu yang dinyatakan sebagai hujah ketiga (jika ada).

Juga, kita mungkin boleh membuat tugas Prod yang boleh dijalankan tepat sebelum menggunakan pengeluaran (mungkin dengan cangkuk git). Tugas ini harus:

menyusun sass dalam mod termampat
awalan CSS dengan autoprefixer
Regenerate SASSDOC Documentation
Elakkan mana -mana Sourcemaps

gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Pemikiran Akhir

itu orang! Hanya dalam beberapa minit dan beberapa baris JavaScript, kami telah berjaya membuat aliran kerja Gulp yang kuat. Anda boleh mencari fail penuh di sini. Apa yang akan anda tambahkan?

Soalan Lazim (Soalan Lazim) Mengenai Aliran Kerja Gulp dan Sass

Bagaimana saya memasang Gulp dan Sass untuk projek saya? Sebaik sahaja anda mempunyai ini, anda boleh memasang GULP secara global dengan menjalankan pemasangan NPM Command-Gulp-CLI global di terminal anda. Selepas itu, navigasi ke direktori projek anda dan jalankan NPM init untuk membuat fail Package.json. Kemudian, pasang Gulp dan Gulp-Sass dalam projek anda dengan menjalankan NPM Install--Save-Dev Gulp Gulp-Sass.

Bagaimana saya menyusun fail sass saya menggunakan GULP?

Untuk menyusun fail SASS anda menggunakan GULP, anda perlu membuat tugas GULP. Dalam gulpfile.js anda, anda boleh membuat tugas bernama 'sass' yang akan menyusun fail SASS anda ke CSS. Berikut adalah contoh mudah bagaimana untuk melakukan ini:

var gulp = memerlukan ('gulp');
var sass = memerlukan ('gulp-sass'); ('sass', fungsi () { kembali gulp.src ('./ sass/** /. ;

Tugas ini akan mengambil semua fail .scss dalam direktori sass anda, menyusunnya ke dalam CSS menggunakan s-sass, dan output CSS yang dihasilkan fail dalam direktori css anda.

Bagaimana saya menonton perubahan dalam fail sass saya dan menyusunnya secara automatik? berubah. Berikut adalah cara anda boleh mengubahsuai tugas 'sass' untuk menonton perubahan:

gulp.task ('sass', function () {
gulp.watch ('./ sass/**/*. scss', ['sass']);
}); 🎜>

Bagaimana saya mengendalikan kesilapan dalam fail sass saya?

Apabila menyusun fail SASS, anda mungkin menghadapi ralat sintaks. Anda boleh mengendalikan kesilapan ini menggunakan kaedah ON yang disediakan oleh Gulp-Sass. Berikut adalah cara anda boleh mengubahsuai tugas 'sass' untuk log ralat:

gulp.task ('sass', function () {
kembali gulp.src ('./ sass/**/*. scss ')
.pipe (sass (). on (' error ', sass.logerror))
.pipe (gulp.dest ('./ css')); Bagaimana saya menggunakan Gulp untuk meminimumkan fail CSS saya? Plugin Gulp yang dipanggil Gulp-Clean-CSS. Pertama, pasangkannya dalam projek anda dengan menjalankan NPM Install--Save-Dev Gulp-Clean-CSS. Kemudian, anda boleh membuat tugas yang akan meminimumkan fail CSS anda:

var cleancss = memerlukan ('gulp-clean-css'); () => { kembali gulp.src ('Styles/*. Css')

.pipe (cleanCss ({keserasian: 'ie8'}))

.pipe (gulp.dest ('dist')); Dalam direktori Styles anda, tenggelam mereka menggunakan Gulp-Clean-CSS, dan output fail CSS minified yang dihasilkan dalam direktori Dist anda.

Atas ialah kandungan terperinci Aliran kerja yang mudah ' y untuk sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!