Advertisement
Guest User

Untitled

a guest
Jul 20th, 2017
50
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.55 KB | None | 0 0
  1. npm dash -v (check node.js version)
  2. npm install -g gulp (global install gulp to the system)
  3.  
  4.  
  5. Project folder:
  6.  
  7. npm init
  8. npm install gulp --save-dev
  9. npm install gulp-less --save-dev
  10. npm install gulp-concat-css --save-dev
  11. npm install gulp-csso --save-dev
  12. npm install gulp-plumber --save-dev
  13. npm install gulp-browser-sync --save-dev
  14.  
  15.  
  16.  
  17.  
  18. var gulp = require('gulp'), //gulp init
  19. less = require('gulp-less'), //less init
  20. concatCSS = require('gulp-concat-css'), //concat plugin init
  21. minify = require('gulp-csso'), //plugin init
  22. plumber = require('gulp-plumber'); //plumber init
  23. bs = require('browser-sync'); //bs init
  24.  
  25. gulp.task('default', function() { //default - taskName
  26. bs.init({ //browser-sync init
  27. server: {
  28. baseDir: "app/", // what folder bs must to watch
  29. //proxy: "homework.sl" // thats for bs+openserver
  30. },
  31. notify: false
  32. });
  33. gulp.watch("app/less/*.less", ['less']); //if we edit any .less file, then 'less' task starts
  34. gulp.watch("app/*.html").on('change', bs.reload); //if we edit any.html file, then bs reloads
  35.  
  36. })
  37.  
  38. gulp.task('less', function() { //new task. less - taskName
  39. return gulp.src('app/less/*.less') //take all .less files from app/less/
  40. .pipe(plumber())
  41. .pipe(less()) //less compile
  42. .pipe(concatCSS('style.css')) //less files concating to style.css
  43. .pipe(minify()) //minifying css file w/ plugin "gulp-csso" (#4 line)
  44. .pipe(gulp.dest('app/css/')) //putting to new folder in dist/styles/
  45. .pipe(bs.stream()); // just use it after gulp.dest()
  46. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement