Base Gulpfile template for SCORM compliant module

var projectName = 'cricket-au'; var moduleNo = '9'; var scormVersion = '2004'; // 1.2 or 2004 var browserSyncOn = true; var jsFiles = [ "node_modules/jquery/dist/jquery.min.js", "node_modules/jquery-ui-dist/jquery-ui.min.js", "node_modules/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js", "node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js", "node_modules/flexslider/jquery.flexslider-min.js", "node_modules/gsap/src/minified/TweenMax.min.js", "node_modules/gsap/src/minified/TimelineMax.min.js", "dev/js/scorm.js", "dev/js/main.js", "dev/js/sortable.js", "dev/js/knowledgeCheck.js", "dev/js/knowledgeCheckMultiple.js", "dev/js/tips.js", "dev/js/sortable.js", "dev/js/accordion.js", "dev/js/videoMultiple.js" ] var cssFiles = [ "node_modules/jquery-ui-dist/jquery-ui.min.css", "node_modules/flexslider/flexslider.css", "dev/sass/**/*.scss" ] if(scormVersion == '2004') { var scormJS = [ "dev/js/scorm-2004.js" ] } else { var scormJS = [ "dev/js/scorm-1.2.js" ] } var gulp = require('gulp'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), clean = require('gulp-clean-css'), rename = require('gulp-rename'), sass = require('gulp-sass'), del = require('del'), notify = require('gulp-notify'), pug = require('gulp-pug'); strip = require('gulp-strip-comments'), sourcemaps = require('gulp-sourcemaps'), data = require('gulp-data'), fs = require('fs'), zip = require('gulp-zip'), htmlreplace = require('gulp-html-replace'), browserSync = require('browser-sync').create(); // Task to check which version of scorm is being used to decide what imsmanifest file needs to be used gulp.task('scormManifest', function(){ if(scormVersion == '2004') { var scormManifestSrc = 'imsmanifest-2004.xml'; } else { var scormManifestSrc = 'imsmanifest-1.2.xml'; } return gulp.src(scormManifestSrc) .pipe(rename('imsmanifest.xml')) .pipe(gulp.dest('dist')); }); // move scorm.js to dist/js gulp.task('scormjs', function() { return gulp.src(scormJS) .pipe(concat('scorm.js')) .pipe(rename('scorm.min.js')) // UNCOMMENT WHEN LIVE //.pipe(strip()) //.pipe(uglify()) .pipe(gulp.dest('dist/scormcontent/js')); }); // Concat + minify JS scripts for production // Loops through jsFiles array at top of page // Will build in the order of the array gulp.task('scripts', ['scormjs'], function () { return gulp.src(jsFiles) .pipe(sourcemaps.init()) .pipe(concat('scripts.js')) .pipe(rename('scripts.min.js')) // UNCOMMENT WHEN LIVE //.pipe(strip()) //.pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist/scormcontent/js')); }); // Compiles sass and chucks it into dev/css gulp.task('compileSass', function () { return gulp.src(cssFiles) .pipe(sass({ outputStyle: 'compressed' })) .on("error", notify.onError(function (error) { return error.message; })) .pipe(gulp.dest('dev/css')) .pipe(browserSync.stream()); }); // Grabs the compiled sass from dev/css and minifies/cleans it // Puts it into the dist/css folder for production gulp.task("minifyCss", ["compileSass"], function () { return gulp.src([ "dev/css/**/*.css" ]) .pipe(concat('all.css')) //.pipe(clean({compatibility: 'ie8'})) .pipe(rename('styles.min.css')) .pipe(gulp.dest('dist/scormcontent/css')) }); // Compiles Pug template files into html and minifes them gulp.task('views', ['renameAndMoveCurrentModule'], function buildHTML() { return gulp.src([ 'views/*.pug', 'views/modules/*.pug' ]) .pipe(pug()) .on("error", notify.onError(function (error) { return error.message; })) .pipe(gulp.dest('dist/scormcontent')); }); // Renames current module to index.html and moves to scormcontent folder gulp.task('renameAndMoveCurrentModule', function () { setTimeout(function() { return gulp.src('dist/**/module-' + moduleNo + '.html') .pipe(rename('index.html')) .pipe(gulp.dest('dist/scormcontent/')); }, 100); }); gulp.task('clean', ['minifyCss'], function () { del(['dev/css']); }); // Watches for changes on css/js/pug files // Triggers a build for the specific type gulp.task('watch', [], function () { if(browserSyncOn) { browserSync.init({ server: { baseDir: 'dist/scormcontent' } }); } gulp.watch('dev/sass/**/*.scss', ['compileSass', 'minifyCss', 'clean']); gulp.watch('dev/js/*.js', ['scripts']); gulp.watch('views/**/*.pug', ['views']); if(browserSyncOn) { gulp.watch(['dist/**/*.html', 'dist/**/*.css', 'dist/**/*.js']).on('change', browserSync.reload); } }); // Runs all of the tasks gulp.task("build", ['scormManifest', 'compileSass', 'minifyCss', 'scripts', 'views', 'clean'], function (done) { gulp.src(["scormcontent/css/style.min.css"]) .pipe(gulp.dest('dist')); gulp.src('dist/**/module-' + moduleNo + '.html') .pipe(rename('index.html')) .pipe(gulp.dest('dist/scormcontent/')); var includeWoolworthsImages, logo, cssFile; if(moduleNo == '8' || moduleNo == '9') { includeWoolworthsImages = 'dist/**/img/woolworths-theme/*'; logoName = 'logo-big-cb.png'; cssFile = 'loader-mod-8-to-9.css'; } else { includeWoolworthsImages = '!dist/**/img/woolworths-theme/'; logoName = 'logo-big.png'; cssFile = 'loader-mod-1-to-7.css'; } gulp.src('dist/index.html') .pipe(htmlreplace({ 'logo': '<img src="scormcontent/img/' + logoName + '" />', 'loader-css': 'scormcontent/css/' + cssFile }, { keepBlockTags: true })) .pipe(gulp.dest('dist/')); setTimeout(function () { gulp.start('build'); // zip gulp.src([ 'dist/*', 'dist/**/css/**', 'dist/**/js/**', 'dist/**/img/*', 'dist/**/img/gifs/*', 'dist/**/img/tip-reveal/*', 'dist/**/img/**/module-' + moduleNo + '/*', includeWoolworthsImages, '!dist/**/img/**/module-*/', '!dist/**/img/svgs/', 'dist/**/pdfs/**', 'dist/**/index.html' ]) .pipe(zip(projectName + '-module-' + moduleNo + '.zip')) .pipe(gulp.dest('./')) done(); }, 1000); }); // running 'gulp' in the cmd line will execute the build task gulp.task("default", function () { gulp.start('build'); });
Base gulpfile for SCORM compliant modules with the use of PUG(Jade) and SCSS.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.