Gulp
Содержание
Install
- Для использования надо установить gulp глобально (npm i gulp -g)
- Файл назвать gulpfile.js
gulp sass
, gulp sass:watch
)
Собрать Sass (комманды в консоли - gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
// var sass_path = './static/sass/**/*.scss';
var sass_path = './public/sass/index.scss';
gulp.task('sass', function () {
gulp.src(sass_path)
.pipe(sass().on('error', sass.logError))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./public/css'));
});
gulp.task('sass:watch', function () {
gulp.watch(sass_path, ['sass']);
});
(MinifyJS) Сделать script.js -> script.min.js
gulpfile.js
var minify = require('gulp-minify');
/*
* Make all javascript to minfied scripts (not to one)
*
*/
gulp.task('compress', function() {
gulp.src('resources/js/*.js')
.pipe(minify({
ext:{
src:'-debug.js',
min:'.js'
},
// exclude: ['tasks'],
// ignoreFiles: ['.combo.js', '-min.js']
}))
.pipe(gulp.dest('dist'))
});
(Bundle Assets) Собрать Sass -> Сss, JS -> Bundle
gulpfile.js
var bundle = require('gulp-bundle-assets');
/*
* Make all javascript to minfied scripts in ONE (Bundle it)
*
*/
gulp.task('bundle', function() {
return gulp.src('./bundle.config.js')
.pipe(bundle())
.pipe(gulp.dest('./dist'));
});
bundle.config.js
var lazypipe = require('lazypipe');
var sass = require('gulp-sass');
var gif = require('gulp-if');
function stringEndsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
// only run transforms against certain file types.
// This is only necessary if your bundle has a mix of file types in it
function isScssFile(file) {
return stringEndsWith(file.relative, 'scss');
}
// pipe as many transforms together as you like
var styleTransforms = lazypipe()
.pipe(function() {
// when using lazy pipe you need to call gulp-if from within an anonymous func
// https://github.com/robrich/gulp-if#works-great-inside-lazypipe
return gif(isScssFile, sass());
});
module.exports = {
bundle: {
main: {
scripts: [
'./resources/js/app.js',
'./resources/js/components.js'
],
options: {
transforms: {
// scripts: scriptTransforms, // pipe(s) of script transforms
styles: styleTransforms // pipe(s) of style transforms
}
},
// styles: './styles/**/*.css'
styles: './resources/sass/*.scss'
},
vendor: {
scripts: './resources/js/vue.js'
}
},
copy: './content/**/*.{png,svg}'
};
← CSS resources Webpack →