SHARE
TWEET

gulpfile.js

T99 Jun 17th, 2019 (edited) 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const gulp = require("gulp");
  2. const typescript = require("gulp-typescript");
  3. const sourcemaps = require("gulp-sourcemaps");
  4. const browserify = require("browserify");
  5. const uglify = require("gulp-uglify-es").default;
  6. const source = require('vinyl-source-stream');
  7. const buffer = require('vinyl-buffer');
  8. const sass = require("gulp-sass");
  9. const del = require("del");
  10.  
  11. const paths = {
  12.    
  13.     typescript: {
  14.        
  15.         dir: "ts/",
  16.         allFiles: "ts/**/*.ts",
  17.         tsconfig: "ts/tsconfig.json"
  18.        
  19.     },
  20.    
  21.     javascript: {
  22.        
  23.         dir: "js/",
  24.         allFiles: "js/**/*.js",
  25.         entryPoint: "js/main.js",
  26.         entryPointFileName: "main.js"
  27.        
  28.     },
  29.    
  30.     styles: {
  31.        
  32.         dir: "styles/",
  33.        
  34.         css: {
  35.            
  36.             dir: "styles/",
  37.             allFiles: "styles/**/*.css*"
  38.            
  39.         },
  40.        
  41.         scss: {
  42.            
  43.             dir: "styles/sass/",
  44.             allFiles: "styles/sass/**/*.scss",
  45.             cache: "styles/sass/.sass-cache/"
  46.            
  47.         }
  48.        
  49.     }
  50.    
  51. };
  52.  
  53. let typescriptProject = typescript.createProject(paths.typescript.tsconfig);
  54.  
  55. // The default Gulp task.
  56. gulp.task("default", defaultTask);
  57.  
  58. // Cleans (deletes) all generated/compiled files.
  59. gulp.task("clean", clean);
  60.  
  61. // Builds the entire project.
  62. gulp.task("build", build);
  63.  
  64. // Cleans and builds the entire project.
  65. gulp.task("rebuild", rebuild);
  66.  
  67. // Compile/build through the entire pipeline from TypeScript files to a browser-ready bundle.
  68. gulp.task("build-js", buildJavaScriptPipeline);
  69.  
  70. // Compile/build all relevant stylesheets.
  71. gulp.task("build-styles", buildStylesPipeline);
  72.  
  73. // Watch for changes to relevant files and compile-on-change.
  74. gulp.task("watch", watch);
  75.  
  76. function defaultTask(done) {
  77.  
  78.     return rebuild(done);
  79.    
  80. }
  81.  
  82. function clean(done) {
  83.    
  84.     return del([
  85.         paths.javascript.dir,
  86.         paths.styles.css.allFiles,
  87.         paths.styles.scss.cache
  88.     ]);
  89.    
  90. }
  91.  
  92. function build(done) {
  93.    
  94.     gulp.parallel(
  95.         buildJavaScriptPipeline,
  96.         buildStylesPipeline
  97.     )(done);
  98.    
  99. }
  100.  
  101. function rebuild(done) {
  102.    
  103.     gulp.series(clean, build)(done);
  104.    
  105. }
  106.  
  107. function buildJavaScriptPipeline(done) {
  108.    
  109.     return gulp.series(
  110.         compileTypeScript,
  111.         browserifyJavaScript,
  112.         uglifyJavaScript
  113.     )(done);
  114.    
  115. }
  116.  
  117. function compileTypeScript(done) {
  118.    
  119.     return typescriptProject.src()
  120.         .pipe(sourcemaps.init())
  121.         .pipe(typescriptProject()).js
  122.         .pipe(sourcemaps.write("."))
  123.         .pipe(gulp.dest(paths.javascript.dir));
  124.    
  125. }
  126.  
  127. function browserifyJavaScript(done) {
  128.  
  129.     return browserify({
  130.             transform: [["babelify", { "presets": ["@babel/preset-env"] }]],
  131.             debug: true,
  132.             entries: [paths.javascript.entryPointFileName],
  133.             basedir: paths.javascript.dir,
  134.             cache: {},
  135.             packageCache: {}
  136.         }).bundle()
  137.         .pipe(source("bundle.js"))
  138.         .pipe(buffer())
  139.         .pipe(gulp.dest(paths.javascript.dir));
  140.  
  141. }
  142.  
  143. function uglifyJavaScript(done) {
  144.  
  145.     return gulp.src(paths.javascript.allFiles)
  146.         .pipe(uglify())
  147.         .pipe(gulp.dest(paths.javascript.dir));
  148.  
  149. }
  150.  
  151. function buildStylesPipeline(done){
  152.    
  153.     return compileSCSS(done);
  154.    
  155. }
  156.  
  157. function compileSCSS(done) {
  158.    
  159.     return gulp.src(paths.styles.scss.allFiles)
  160.         .pipe(sourcemaps.init())
  161.         .pipe(sass.sync().on("error", sass.logError))
  162.         .pipe(sourcemaps.write("."))
  163.         .pipe(gulp.dest(paths.styles.css.dir));
  164.    
  165. }
  166.  
  167. function watch(done) {
  168.    
  169.     gulp.parallel(watchTypeScript, watchSCSS)(done);
  170.    
  171. }
  172.  
  173. function watchTypeScript(done) {
  174.    
  175.     gulp.watch([paths.typescript.allFiles], compileTypeScript);
  176.    
  177. }
  178.  
  179. function watchSCSS(done) {
  180.    
  181.     gulp.watch([paths.styles.scss.allFiles], compileSCSS);
  182.    
  183. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top