javascript Gulp - 示例文件

Posted 2021-05-04

var gulp = require('gulp');

var clean = require('gulp-clean');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');

var bases = {
 app: 'app/',
 dist: 'dist/',
};

var paths = {
 scripts: ['scripts/**/*.js', '!scripts/libs/**/*.js'],
 libs: ['scripts/libs/jquery/dist/jquery.js', 'scripts/libs/underscore/underscore.js', 'scripts/backbone/backbone.js'],
 styles: ['styles/**/*.css'],
 html: ['index.html', '404.html'],
 images: ['images/**/*.png'],
 extras: ['crossdomain.xml', 'humans.txt', 'manifest.appcache', 'robots.txt', 'favicon.ico'],
};

// Delete the dist directory
gulp.task('clean', function() {
 return gulp.src(bases.dist)
 .pipe(clean());
});

// Process scripts and concatenate them into one output file
gulp.task('scripts', ['clean'], function() {
 gulp.src(paths.scripts, {cwd: bases.app})
 .pipe(jshint())
 .pipe(jshint.reporter('default'))
 .pipe(uglify())
 .pipe(concat('app.min.js'))
 .pipe(gulp.dest(bases.dist + 'scripts/'));
});

// Imagemin images and ouput them in dist
gulp.task('imagemin', ['clean'], function() {
 gulp.src(paths.images, {cwd: bases.app})
 .pipe(imagemin())
 .pipe(gulp.dest(bases.dist + 'images/'));
});

// Copy all other files to dist directly
gulp.task('copy', ['clean'], function() {
 // Copy html
 gulp.src(paths.html, {cwd: bases.app})
 .pipe(gulp.dest(bases.dist));

 // Copy styles
 gulp.src(paths.styles, {cwd: bases.app})
 .pipe(gulp.dest(bases.dist + 'styles'));

 // Copy lib scripts, maintaining the original directory structure
 gulp.src(paths.libs, {cwd: 'app/**'})
 .pipe(gulp.dest(bases.dist));

 // Copy extra html5bp files
 gulp.src(paths.extras, {cwd: bases.app})
 .pipe(gulp.dest(bases.dist));
});

// A development task to run anytime a file changes
gulp.task('watch', function() {
 gulp.watch('app/**/*', ['scripts', 'copy']);
});

// Define the default task as a sequence of the above tasks
gulp.task('default', ['clean', 'scripts', 'imagemin', 'copy']);

// Variables init
var gulp = require('gulp');
var concat = require('gulp-concat');
var cssmin = require('gulp-cssmin');
var jsValidate = require('gulp-jsvalidate');
var less = require('gulp-less');
/* var scss = require('gulp-sass'); */
var path = require('path');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var gutil = require('gulp-util');
var bSync = require('browser-sync').create();
var logError = function (err) {
	gutil.log(
			gutil.colors.red('CHYBA V: ') +
			gutil.colors.magenta(err.fileName) +
			gutil.colors.red(' NA ŘÁDKU: ') +
			gutil.colors.magenta(err.lineNumber)
			);	
};

// Static Server + watching scss/js/phtml files
gulp.task('serve', ['less', 'scripts'], function () {

	// Static server
	bSync.init({
		// Proxy server via MAMP
		proxy: "nette.l/"

		// Server via DIR
		/* server: {
			baseDir: "./"
		} */
	});
	// Watchers    
	gulp.watch("www/assets/less/**/*.less", ['less']).on('change', bSync.reload);
	gulp.watch("www/assets/js/**/*.js", ['scripts']).on('change', bSync.reload);
	gulp.watch("app/**/*.latte").on('change', bSync.reload);
	gulp.watch("app/**/*.php").on('change', bSync.reload);
});

// Compile scss into CSS, catch error & log them into terminal
gulp.task('less', function () {
	return gulp.src("www/assets/less/styles.less").on('error', gutil.log)
			// error log & continue in progress
			.pipe(less().on('error', function (err) {
				logError(err);
				this.emit('end');
			}))
			// minify
			.pipe(cssmin())
			// add .min to name
			.pipe(rename({suffix: ".min"}))
			// save to distribute destination
			.pipe(gulp.dest("www/css/dist"));
});

// Concat all script into one & uglify (minify), catch error & log them into terminal
gulp.task('scripts', function () {
	return gulp.src('www/assets/js/**/*.js')
			// error log & continue in progress
			.pipe(jsValidate().on('error', function (err) {
				logError(err);	
				this.emit('end');
			}))
			// concat		
			.pipe(concat('scripts.min.js').on('error', gutil.log))
			// uglify
			.pipe(uglify())
			// save to distribute destination
			.pipe(gulp.dest('www/js/dist'));
});

// Run default task on gulp start
gulp.task('default', ['serve']);