bootstrap

I think it was the gulp basics course.

Here is what i have so far. I have only worked on sass2CSS and processCSS and processJS. Not sure if the rest would work or not. Using the latest version of gulp. Right now i have it all going to a minify version of css and js for all css and js. It will include font-awesome as well at some point. It's hard to find courses right now that uses the current version of gulp that doesn't have things deprecated in it.

Right now i got it so it takes my sass files from the src/sass directory and puts it all in src/css folder minified for each css file. Then i take src/css and concat all src/css files together into one style.min.css file in a dist directory. dist directory is the one that the browser renders for me to use.

const gulp = require('gulp'); const browserSync = require('browser-sync').create(); const sass = require('gulp-sass'); const concatCss = require('gulp-concat-css'); const cleanCSS = require('gulp-clean-css'); const uglify = require('gulp-uglify'); const gulpIf = require('gulp-if'); const sourcemaps = require('gulp-sourcemaps'); const useref = require('gulp-useref'); const lazypipe = require('lazypipe');

const rootSrc = "src"; const distSrc = "dist";

const scssSource = [ rootSrc + '/sass/.scss', rootSrc + '/sass//.scss' ];

const jsSource = [ 'node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js', rootSrc + '/js/*/.js' ];

const cssSource = [ rootSrc + '/css/*/.css', rootSrc + '/css/*.css' ];

const htmlSource = [rootSrc + '/*.html'];

// Compile sass into CSS & auto-inject into browsers gulp.task('sass2CSS', function () { return gulp.src(scssSource) .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError)) .pipe(gulp.dest(rootSrc + '/css')) .pipe(browserSync.stream()) });

// CONCAT ALL SCSS FILES FROM SRC/CSS FOLDER TOGETHER gulp.task('processCSS', function () { return gulp.src(cssSource) .pipe(concatCss('style.min.css')) .pipe(cleanCSS()) .pipe(gulp.dest(distSrc + '/css')); });

// Move the javascript files into our /src/js folder gulp.task('processJS', function () { return gulp.src(jsSource) .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(sourcemaps.write('maps')) .pipe(gulp.dest(distSrc + '/js')) .pipe(browserSync.stream()); });

// gulp.task('prodJS', function () { // return gulp.src(jsSource) // .pipe(useref({}, lazypipe().pipe(sourcemaps.init, { // loadMaps: true // }))) // .pipe(sourcemaps.write('maps')) // .pipe(gulpIf('*.js', uglify())) // .pipe(gulp.dest('dist')) // });

// Static Server + watching scss/html files gulp.task('serve', gulp.series('sass2CSS', function () {

browserSync.init({
    server: "./" + rootSrc
});

gulp.watch(scssSource, gulp.series('sass2CSS'));
gulp.watch(htmlSource).on('change', browserSync.reload);

}));

gulp.task('default', gulp.series('processJS', 'serve'));

well i kinda thought about it after the fact i wrote that. new to gulp and bootstrap. but right now it think the gulp file works but need to figure out how to do sourcemaps for both css and js and clean the dist folder of all files and folders minus images folder so all files are updated each time i run gulp.

i thought about that after the fact. New to gulp and bootstrap. Most or all of my gulpfile works just need to figure out how to do sourcemaps for both js and.css or scss if thats better actually while im working in scss coding the site. after that need to figure iut how to clean all files and folders except for images folder in the dist folder. Not sure what the best route to go is with that. I just wanna make sure i dont have straggling files or folders from creating something then changing my mind later and now i got a straggling file or folder. Know what i mean?