Gulp gits
---
__________Final Gulp set-up_________
var gulp = require('gulp');
// Now that we've installed the uglify package we can require it:
var uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
browserSync = require('browser-sync'),
eslint = require('gulp-eslint'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
prettyError = require('gulp-prettyerror');
gulp.task('sass', function() {
gulp.src('./sass/style.scss')
.pipe(prettyError()) //error handling
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(gulp.dest('./build/css'))
.pipe(cssnano())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('./build/css'));
});
gulp.task('scripts', ['eslint'], function(){
gulp.src('./js/*.js') // What files do we want gulp to consume?
.pipe(uglify()) // Call the uglify function on these files
.pipe(rename({ extname: '.min.js' })) // Rename the uglified file
.pipe(gulp.dest('./build/js')) // Where do we put the result?
});
gulp.task('eslint', function() {
return gulp.src(['./js/*.js'])
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
gulp.task('watch', function() {
gulp.watch('sass/*.scss', ['sass']);
gulp.watch('js/*.js', ['scripts']);
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch(['*.html', 'build/css/*.css', 'build/js/*.js']).on('change', browserSync.reload);
});
gulp.task('default', ['watch', 'browser-sync', 'eslint']);
---
___________first gulp below
var gulp = require('gulp'); // Load Gulp!
// Now that we've installed the uglify package we can require it:
var uglify = require('gulp-uglify'),
rename = require('gulp-rename');
gulp.task('default', function(){
gulp.src('./js/*.js') // What files do we want gulp to consume?
.pipe(uglify()) // Call the uglify function on these files
.pipe(rename({ extname: '.min.js' })) // Rename the uglified file
.pipe(gulp.dest('./build/js')) // Where do we put the result?
});
___________
var gulp = require('gulp'); // Load Gulp!
// Now that we've installed the uglify package we can require it:
var uglify = require('gulp-uglify'),
rename = require('gulp-rename');
gulp.task('scripts', function(){
gulp.src('./js/*.js') // What files do we want gulp to consume?
.pipe(uglify()) // Call the uglify function on these files
.pipe(rename({ extname: '.min.js' })) // Rename the uglified file
.pipe(gulp.dest('./build/js')) // Where do we put the result?
});
gulp.task('say_hello', function() {
console.log('Hello!');
});
//Modify our default task method by passing an array of task names
gulp.task('default', ['scripts', 'say_hello']);
________
var gulp = require('gulp');
// Now that we've installed the uglify package we can require it:
var uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
browserSync = require('browser-sync');
gulp.task('scripts', function(){
gulp.src('./js/*.js') // What files do we want gulp to consume?
.pipe(uglify()) // Call the uglify function on these files
.pipe(rename({ extname: '.min.js' })) // Rename the uglified file
.pipe(gulp.dest('./build/js')) // Where do we put the result?
});
gulp.task('watch', function() {
gulp.watch('js/*.js', ['scripts']);
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch(['*.html', 'build/css/*.css', 'build/js/*.js']).on('change', browserSync.reload);
});
//Modify our default task method by passing an array of task names
gulp.task('default', ['watch', 'browser-sync']);
____eslint / browserSyn / Watch / scripts________
var gulp = require('gulp');
// Now that we've installed the uglify package we can require it:
var uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
browserSync = require('browser-sync'),
eslint = require('gulp-eslint');
gulp.task('scripts', ['lint'], function(){
gulp.src('./js/*.js') // What files do we want gulp to consume?
.pipe(uglify()) // Call the uglify function on these files
.pipe(rename({ extname: '.min.js' })) // Rename the uglified file
.pipe(gulp.dest('./build/js')) // Where do we put the result?
});
gulp.task('lint', function() {
// ESLint ignores files with "node_modules" paths.
// So, it's best to have gulp ignore the directory as well.
// Also, Be sure to return the stream from the task;
// Otherwise, the task may end before the stream has finished.
return gulp.src(['./js/*.js','!node_modules/**'])
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failAfterError last.
.pipe(eslint.failAfterError());
});
gulp.task('watch', function() {
gulp.watch('js/*.js', ['scripts']);
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch(['*.html', 'build/css/*.css', 'build/js/*.js']).on('change', browserSync.reload);
});
//Modify our default task method by passing an array of task names
gulp.task('default', ['watch', 'browser-sync', 'eslint']);