[refactor] improve dev process with gulp watch

Author: zombieFox

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
-dest
+dev
+build
 node_modules

gulpfile.js

@@ -1,6 +1,7 @@
 const{
  src,
  dest,
+ series,
  parallel
 }=require('gulp');
 
@@ -14,92 +15,163 @@ const replace = require('gulp-replace');
 
 consthtmlmin=require('gulp-htmlmin');
 
-constfolder={
+constwatch=require('gulp-watch');
+
+constclean=require('gulp-clean');
+
+constpath={
 src: 'src',
-dest: 'dest/web',
+dev: 'dev',
+build: 'build/web',
 nodeModules: 'node_modules',
 }
 
 constfilename={
 css: "nighttab.min.css",
+jsDependencies: "nighttab.dependencies.js",
+jsFiles: "nighttab.files.js",
 js: "nighttab.min.js"
 }
 
-functionmanifest(){
-returnsrc(folder.src+'/manifest.json')
-.pipe(dest(folder.dest))
-}
-
-functionhtml(){
-returnsrc(folder.src+'/index.html')
-.pipe(replace(/\<\!\-\-\ css\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-css\-block\ \-\-\>/mg,'<link rel="stylesheet" href="css/'+filename.css+'">'))
-.pipe(replace(/\<\!\-\-\ js\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-js\-block\ \-\-\>/mg,'<script src="js/'+filename.js+'"></script>'))
-.pipe(htmlmin({
-collapseWhitespace: true
-}))
-.pipe(dest(folder.dest))
-}
-
-functionfonts(){
-returnsrc(folder.src+'/fonts/**/*.*')
-.pipe(dest(folder.dest+'/fonts'))
-}
+constjsDependencies=[
+path.nodeModules+'/html5sortable/dist/html5sortable.min.js',
+path.nodeModules+'/invert-color/lib/invert.min.js'
+]
 
-functionicons(){
-returnsrc(folder.src+'/icons/**/*.*')
-.pipe(dest(folder.dest+'/icons'))
-}
+constjsFiles=[
+path.src+'/js/helper.js',
+path.src+'/js/data.js',
+path.src+'/js/fontawesome.js',
+path.src+'/js/update.js',
+path.src+'/js/state.js',
+path.src+'/js/bookmarks.js',
+path.src+'/js/control.js',
+path.src+'/js/menu.js',
+path.src+'/js/header.js',
+path.src+'/js/modal.js',
+path.src+'/js/tip.js',
+path.src+'/js/shade.js',
+path.src+'/js/theme.js',
+path.src+'/js/date.js',
+path.src+'/js/greeting.js',
+path.src+'/js/transitional.js',
+path.src+'/js/clock.js',
+path.src+'/js/search.js',
+path.src+'/js/link.js',
+path.src+'/js/version.js',
+path.src+'/js/keyboard.js',
+path.src+'/js/background.js',
+path.src+'/js/layout.js',
+path.src+'/js/auto-suggest.js',
+path.src+'/js/pagelock.js',
+path.src+'/js/edge.js',
+path.src+'/js/init.js'
+]
 
-functioncss(){
-returnsrc(folder.src+'/css/*.css')
-.pipe(concat(filename.css))
-.pipe(csso())
-.pipe(dest(folder.dest+'/css'))
+constbuild={
+manifest: function(){
+returnsrc(path.src+'/manifest.json')
+.pipe(dest(path.build))
+},
+html: function(){
+returnsrc(path.src+'/index.html')
+.pipe(replace(/\<\!\-\-\ css\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-css\-block\ \-\-\>/mg,'<link rel="stylesheet" href="css/'+filename.css+'">'))
+.pipe(replace(/\<\!\-\-\ js\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-js\-block\ \-\-\>/mg,'<script src="js/'+filename.js+'"></script>'))
+.pipe(htmlmin({
+collapseWhitespace: true
+}))
+.pipe(dest(path.build))
+},
+fonts: function(){
+returnsrc(path.src+'/fonts/**/*.*')
+.pipe(dest(path.build+'/fonts'))
+},
+icons: function(){
+returnsrc(path.src+'/icons/**/*.*')
+.pipe(dest(path.build+'/icons'))
+},
+css: function(){
+returnsrc(path.src+'/css/*.css')
+.pipe(concat(filename.css))
+.pipe(csso())
+.pipe(dest(path.build+'/css'))
+},
+jsDependencies: function(){
+returnsrc(jsDependencies)
+.pipe(concat(filename.jsDependencies))
+.pipe(dest(path.build+'/js'))
+},
+jsFiles: function(){
+returnsrc(jsFiles)
+.pipe(concat(filename.jsFiles))
+.pipe(uglify())
+.pipe(dest(path.build+'/js',{
+sourcemaps: '.'
+}))
+},
+js: function(){
+returnsrc([path.build+'/js/'+filename.jsDependencies,path.build+'/js/'+filename.jsFiles])
+.pipe(concat(filename.js))
+.pipe(dest(path.build+'/js',{
+sourcemaps: '.'
+}))
+},
+jsClean: function(){
+returnsrc([path.build+'/js/'+filename.jsDependencies,path.build+'/js/'+filename.jsFiles])
+.pipe(clean())
+}
 }
 
-functionjs(){
-returnsrc([
-folder.nodeModules+'/html5sortable/dist/html5sortable.min.js',
-folder.nodeModules+'/invert-color/lib/invert.min.js',
-folder.src+'/js/helper.js',
-folder.src+'/js/data.js',
-folder.src+'/js/fontawesome.js',
-folder.src+'/js/update.js',
-folder.src+'/js/state.js',
-folder.src+'/js/bookmarks.js',
-folder.src+'/js/control.js',
-folder.src+'/js/menu.js',
-folder.src+'/js/header.js',
-folder.src+'/js/modal.js',
-folder.src+'/js/tip.js',
-folder.src+'/js/shade.js',
-folder.src+'/js/theme.js',
-folder.src+'/js/date.js',
-folder.src+'/js/greeting.js',
-folder.src+'/js/transitional.js',
-folder.src+'/js/clock.js',
-folder.src+'/js/search.js',
-folder.src+'/js/link.js',
-folder.src+'/js/version.js',
-folder.src+'/js/keyboard.js',
-folder.src+'/js/background.js',
-folder.src+'/js/layout.js',
-folder.src+'/js/auto-suggest.js',
-folder.src+'/js/pagelock.js',
-folder.src+'/js/edge.js',
-folder.src+'/js/init.js',
-])
-.pipe(concat(filename.js))
-.pipe(uglify())
-.pipe(dest(folder.dest+'/js',{
-sourcemaps: '.'
-}))
+constdev={
+manifest: function(){
+watch(path.src+'/manifest.json',{
+ignoreInitial: false
+},function(){
+returnsrc(path.src+'/manifest.json')
+.pipe(dest(path.dev))
+})
+},
+html: function(){
+watch(path.src+'/index.html',{
+ignoreInitial: false
+},function(){
+returnsrc(path.src+'/index.html')
+.pipe(dest(path.dev))
+})
+},
+fonts: function(){
+watch(path.src+'/fonts/**/*.*',{
+ignoreInitial: false
+},function(){
+returnsrc(path.src+'/fonts/**/*.*')
+.pipe(dest(path.dev+'/fonts'))
+})
+},
+icons: function(){
+watch(path.src+'/icons/**/*.*',{
+ignoreInitial: false
+},function(){
+returnsrc(path.src+'/icons/**/*.*')
+.pipe(dest(path.dev+'/icons'))
+})
+},
+css: function(){
+watch(path.src+'/css/*.css',{
+ignoreInitial: false
+},function(){
+returnsrc(path.src+'/css/*.css')
+.pipe(dest(path.dev+'/css'))
+})
+},
+js: function(){
+watch(jsFiles,{
+ignoreInitial: false
+},function(){
+returnsrc(jsFiles)
+.pipe(dest(path.dev+'/js'))
+})
+}
 }
 
-exports.manifest=manifest;
-exports.html=html;
-exports.fonts=fonts;
-exports.icons=icons;
-exports.css=css;
-exports.js=js;
-exports.default=parallel(manifest,html,fonts,icons,css,js);
+exports.dev=parallel(dev.manifest,dev.html,dev.fonts,dev.icons,dev.css,dev.js)
+exports.build=series(parallel(build.manifest,build.html,build.fonts,build.icons,build.css),series(build.jsDependencies,build.jsFiles,build.js),build.jsClean)