new Vue({
  el: "#blog-post-demo",
  data: {
    posts: [
      { id: 1, title: "My journey with Vue", content: "111" },
      { id: 2, title: "Blogging with Vue", content: "222" },
      { id: 3, title: "Why Vue is so fun", content: "333" }
    ]
  }
});

const updateJSVersion = (watchingfile, name)=> {
    let result = null;
    // const crypto = require('crypto');
    // const uuid = require('uuid');
    // var md5 = crypto.createHash('md5');

    function regExpEscape(literal_string) {
        return literal_string.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&');
    }

    // base on fs write and read file
	fs.readFile(watchingfile,'utf8',function (err,data) {
		// 3 groups , we want to replace group 2.
        var version;
		// var reg =  /('/assets/js/custom.js', array('jquery'), ')(.*)(')/;
        // Hardest part is here!
        var reg = new RegExp(
        	'(' +
        	regExpEscape("/assets/js/")
			+ name
			+ regExpEscape(".js', array('jquery'), '")
			+ ')'
            + '(.*)'
            + '(' + regExpEscape("'") + ')'
			),
        result = reg.exec(data);
        if (result) {
            version = parseInt(result[2]) + 1;
            version = version.toString();
            console.log('updated version:' + version);
		} else {
            console.log('not find matched part');
		}

		result = data.replace(reg, '$1' + version + '$3');

        fs.writeFileSync(watchingfile, result, { 'flag': 'w' }, function(err) {
            if (err) throw err;
        });
	});
	console.log('modify functions.php done');
};

**
 * Task: `vendorJS`.
 *
 * Concatenate and uglify vendor JS scripts.
 *
 * This task does the following:
 *     1. Gets the source folder for JS vendor files
 *     2. Concatenates all the files and generates vendors.js
 *     3. Renames the JS file with suffix .min.js
 *     4. Uglifes/Minifies the JS file and generates vendors.min.js
 */
const createJSGulpTask = (taskName) => {
	let name = taskName.slice(0,-2) ;
	let srcPrefix = './assets/js/';
	let srcPath = srcPrefix + name;
	let cfg = {
	    jsSrc: srcPath + '/*.js', // name folder
		jsDest: srcPrefix, // destination folder
		jsName: name // destination js file name
	};

	fs.exists(cfg.jsSrc, function(exists) {
	    if(!exists) {
	    	var fs = require('fs-extra');
	        fs.mkdirpSync(srcPath);
		}
	});


	gulp.task( taskName , () => {
		return gulp
			.src( cfg.jsSrc, { since: gulp.lastRun( taskName ) }) // Only run on changed files.
			.pipe( plumber( errorHandler ) )
			.pipe(
				babel({
					presets: [
						[
							'@babel/preset-env', // Preset to compile your modern JS to ES5.
							{
								targets: { browsers: config.BROWSERS_LIST } // Target browser list to support.
							}
						]
					]
				})
			)
			.pipe( remember( cfg.jsSrc ) ) // Bring all files back to stream.
			.pipe( concat( cfg.jsName + '.js' ) )
			.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
			.pipe( gulp.dest( cfg.jsDest ) )
			.pipe(
				rename({
					basename: cfg.jsName,
					suffix: '.min'
				})
			)
			.pipe( uglify() )
			.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
			.pipe( gulp.dest( cfg.jsDest) )
			.pipe( notify({ message: '\n\n✅  ===> ' + taskName +  ' — completed!\n', onLast: true }) )
			.on('end',function () {
			    updateJSVersion(config.modifiedPHPFile,name);
			})

	});
};

const jsTasks = ['productJS', 'postJS','customJS','vendorJS'];

jsTasks.forEach( function (value, index, array) {
    createJSGulpTask(value);
})

/**
 * Watch Tasks.
 *
 * Watches for file changes and runs specific tasks.
 */
gulp.task(
	'default',
	gulp.parallel( 'styles', 'images', jsTasks[0], jsTasks[1],jsTasks[2],jsTasks[3],  browsersync, () => {
		gulp.watch( config.watchStyles, gulp.parallel( 'styles' ) ); // Reload on SCSS file changes.
		gulp.watch( config.imgSRC, gulp.series( 'images', reload ) ); // Reload on customJS file changes.
		jsTasks.forEach(function (value, index, array) {
			var  watchJs = './assets/js/' + value.slice(0,-2) + '/*.js';
            gulp.watch( watchJs, gulp.series( value, reload ) );
		})
		// gulp.watch( config.watchPhp, reload ); // Reload on PHP file changes.
	})
);