Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- npm dash -v (check node.js version)
- npm install -g gulp (global install gulp to the system)
- Project folder:
- npm init
- npm install gulp --save-dev
- npm install gulp-less --save-dev
- npm install gulp-concat-css --save-dev
- npm install gulp-csso --save-dev
- npm install gulp-plumber --save-dev
- npm install gulp-browser-sync --save-dev
- var gulp = require('gulp'), //gulp init
- less = require('gulp-less'), //less init
- concatCSS = require('gulp-concat-css'), //concat plugin init
- minify = require('gulp-csso'), //plugin init
- plumber = require('gulp-plumber'); //plumber init
- bs = require('browser-sync'); //bs init
- gulp.task('default', function() { //default - taskName
- bs.init({ //browser-sync init
- server: {
- baseDir: "app/", // what folder bs must to watch
- //proxy: "homework.sl" // thats for bs+openserver
- },
- notify: false
- });
- gulp.watch("app/less/*.less", ['less']); //if we edit any .less file, then 'less' task starts
- gulp.watch("app/*.html").on('change', bs.reload); //if we edit any.html file, then bs reloads
- })
- gulp.task('less', function() { //new task. less - taskName
- return gulp.src('app/less/*.less') //take all .less files from app/less/
- .pipe(plumber())
- .pipe(less()) //less compile
- .pipe(concatCSS('style.css')) //less files concating to style.css
- .pipe(minify()) //minifying css file w/ plugin "gulp-csso" (#4 line)
- .pipe(gulp.dest('app/css/')) //putting to new folder in dist/styles/
- .pipe(bs.stream()); // just use it after gulp.dest()
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement