Introduction
I'm implementing the Gulp task automator, everything is going well, minified, concatenated, and optimized files.
Problem
Now what I lack is to get the mined file (all.min.js) and insert it into my index.html by removing the old imports, I tried searching for something that did this but I did not find it. Does anyone know which one to use?
Gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
pngcrush = require('imagemin-pngcrush'),
concat = require('gulp-concat'),
htmlmin = require('gulp-htmlmin'),
plumber = require('gulp-plumber'),
jshint = require('gulp-jshint'),
notify = require('gulp-notify'),
open = require('gulp-open'),
uglify = require('gulp-uglify')
karma = require('gulp-karma');
// karma
var testFiles = [
'app/scripts/main.js'
];
gulp.task('test', function() {
// Be sure to return the stream
return gulp.src(testFiles)
.pipe(karma({
configFile: 'karma.conf.js',
action: 'run'
}))
.on('error', function(err) {
// Make sure failed tests cause gulp to exit non-zero
throw err;
});
});
// servidor
gulp.task('express', function() {
var express = require('express');
var app = express();
app.use(require('connect-livereload')({port: 4002}));
app.use(express.static(__dirname+"/app"));
app.listen(4000);
});
var tinylr;
gulp.task('livereload', function() {
tinylr = require('tiny-lr')();
tinylr.listen(4002);
});
function notifyLiveReload(event) {
var fileName = require('path').relative(__dirname, event.path);
tinylr.changed({
body: {
files: [fileName]
}
});
}
// Controle de erro pumbler
var onError =function(err){
gulp.beep();
console.log(err);
};
// Open url localhost:4000 in google chrome
gulp.task("url", function(){
gulp.src('app/index.html')
.pipe(open("", {app: "google-chrome", url: "http://localhost:4000"}));
});
// Compile SASS and minify
gulp.task('styles', function() {
return gulp.src('app/styles/**/*.scss')
.pipe(plumber({
errorHendler: onError
}))
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('app/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('app/css'))
.pipe(gulp.dest('dist/css'));
});
// lint jshhnit
gulp.task('lint', function(){
return gulp.src('app/scripts/*.js')
.pipe(plumber({
errorHendler: onError
}))
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
})
// observador
gulp.task('watch', function() {
// Compila .sass
gulp.watch(['app/styles/**/*.scss', 'app/styles/*.scss'], ['styles']);
// livereload alter html file
gulp.watch(['app/*.html', 'app/*/*.html'], notifyLiveReload);
// live reload alter css file
gulp.watch('app/*/*.css', notifyLiveReload);
// duplicado arrumar depois
// Lint alter JS file
gulp.watch(['app/scripts/*.js', 'app/*/*.js'], ['lint']);
// livereload alter JS file
gulp.watch(['app/scripts/*.js', 'app/*/*.js'], notifyLiveReload);
// ..
});
// BUILD
// minify img
gulp.task('imagemin', function(){
return gulp.src('app/image/*')
.pipe(plumber({
errorHendler: onError
}))
.pipe(imagemin({
progressive: true,
svgoPlugins:[{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest('dist/image/'));
});
// concatenar js
gulp.task('scripts', function(){
gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('all.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// minify html
gulp.task('minifyhtml', function(){
gulp.src(['app/*.html', 'app/*/*.html'])
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist/'))
});
// Run '$ gulp'
gulp.task('default', [
'styles',
'express',
'url',
'livereload',
'watch',
'imagemin',
'minifyhtml',
'lint'
], function() {});
gulp.task('build', [
'lint',
'scripts',
'minifyhtml',
'imagemin',
'styles'
])