Кратко про gulp
Минимум для начала работы
проверить node -v и npm -v
npm install gulp -g
npm init
npm install gulp --save-dev
npm install gulp-sass --save-dev
npm install gulp-plumber --save-dev // чтобы gulp продолжал работу при ошибках компиляции
npm install browser-sync --save-dev // для обновления браузера
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var gulp = require('gulp'); var sass = require('gulp-sass'); var browserSync = require('browser-sync'); var plumber = require('gulp-plumber'); gulp.task('sass', function(){ return gulp.src('app/scss/**/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ stream: true })); }); gulp.task('browserSync', function() { browserSync({ server: { baseDir: 'app' }, }); }); gulp.task('watch', ['browserSync', 'sass'], function(){ gulp.watch('app/scss/**/*.scss',['sass']); gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/js/**/*.js', browserSync.reload); }); |
Плагины
autoprefixer
https://github.com/sindresorhus/gulp-autoprefixer
npm install gulp-autoprefixer --save-dev
rimraf
gulp.task('default', function () {
return gulp.src('src/app.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist'));
});
return gulp.src('src/app.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist'));
});
для удаления папок (например, папки build)
npm install rimraf --save-dev
var rimraf = require('rimraf');
gulp.task('cleanBuildDir', function (cb) {
rimraf(buildDir, cb);
});
rimraf(buildDir, cb);
});
более новый аналог https://www.npmjs.com/package/del
gulp-jade
gulp-inline-image
gulp-directory-sync
gulp-concat
gulp-purifycss
gulp-uglify
gulp-imagemin
imagemin-pngquant
gulp-csso
gulp-html5-lint
gulp-inline-image
gulp-directory-sync
gulp-concat
gulp-purifycss
gulp-uglify
gulp-imagemin
imagemin-pngquant
gulp-csso
gulp-html5-lint