json Laravel Gulp设置 - 使用实时重载编译脚本和样式（以及自定义路径和实时构建选项）

Posted 2021-05-19

// ---------------------------------------------------------------------------------
// libs

	var gulp			= require('gulp'),

		// tools
		sass			= require('gulp-sass'),
		uglify			= require('gulp-uglify'),
		sourcemaps		= require('gulp-sourcemaps'),
		livereload		= require('gulp-livereload'),

		// utilities
		argv			= require('yargs').argv,
		gulpif			= require('gulp-if'),
		rename			= require('gulp-rename'),
		concat			= require('gulp-concat');


// ---------------------------------------------------------------------------------
// config

	// paths
	var src =
	{
		css: 'resources/assets/sass/**/*.scss',
		js : 'resources/assets/js/**/*.js'
	};

	var trg =
	{
		css: 'public/assets/css/',
		js : 'public/assets/js/'
	};


// ---------------------------------------------------------------------------------
// sub tasks

	gulp.task('styles', function ()
	{
		return gulp
			.src(src.css)

			// source maps for local and staging
			.pipe(gulpif(!argv.live, sourcemaps.init()))

			// compress only when live
			.pipe(sass(argv.live ? {outputStyle: 'compressed'} : null).on('error', sass.logError))

			// source maps for local and staging
			.pipe(gulpif(!argv.live, sourcemaps.write()))

			// save
			.pipe(gulp.dest(trg.css))

			// livereload
			.pipe(livereload());
	});

	gulp.task('scripts', function ()
	{
		return gulp
			.src(src.js)

			// source maps for local and staging
			.pipe(gulpif(!argv.live, sourcemaps.init()))

			// always concat + uglify, but mangle only on live
			.pipe(uglify({compress: true, mangle: argv.live}))
			.pipe(concat('all.js'))

			// source maps only if not live
			.pipe(gulpif(!argv.live, sourcemaps.write()))

			// save
			.pipe(rename({extname: '.min.js'}))
			.pipe(gulp.dest(trg.js))

			// livereload
			.pipe(livereload());
	});


// ---------------------------------------------------------------------------------
// main tasks

	/**
	 * Build styles and scripts
	 *
	 * Call "gulp build --live" to mangle/compress and skip source maps
	 */
	gulp.task('build', function ()
	{
		gulp.start('styles', 'scripts');
	});

	/**
	 * Monitor styles and scripts, and live-reload when saved
	 */
	gulp.task('default', function ()
	{
		// live-reload
		livereload({start: true});
		livereload.listen();

		// watch
		gulp.watch(src.css, ['styles']);
		gulp.watch(src.js, ['scripts']);
	});

{
	"private": true,
	"devDependencies": {
		"gulp": "^3.9.0",
		"gulp-concat": "^2.6.0",
		"gulp-if": "^2.0.0",
		"gulp-livereload": "^3.8.1",
		"gulp-rename": "^1.2.2",
		"gulp-sass": "^2.0.4",
		"gulp-sourcemaps": "^1.6.0",
		"gulp-uglify": "^1.4.2",
		"yargs": "^3.29.0"
	}
}