Even after removing the uglify from my gulp.js file, it keeps outputting minified javascript. It also runs in milliseconds, making me think it's somehow caching the files. Can I force gulp to redo the tasks completely even though my files haven't changed?
var gulp = require('gulp');
var minifyCSS = require('gulp-csso');
var uglify = require('gulp-uglify-es').default;
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function(){
return gulp.src([
... bunch of css files
])
.pipe(concat('all.css'))
.pipe(gulp.dest('public/css'))
});
gulp.task('js', function(){
return gulp.src([
...bunch of js files
])
.pipe(concat('all.js'))
.pipe(gulp.dest('public/js'))
});
gulp.task('default', [ 'css', 'js' ]);
Sorry for answering my own question. I seem to have had some typo. At first I had all my paths in subfolders. Now that I have moved all my js files into one folder, then ran gulp, I have no more errors. I also think because some files were already minified before gulp this added to the confusion.
Nothing to see here, move on.
Related
I have been playing with gulp and babel for the past few days. I am getting a solid grasp of setting up babel with gulp through tutorials. I've noticed that the newer the tutorial the more changes that develop.
Here is one way I was able to set up es6 to es5 with a transpiler.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
However, I do not want to rerun gulp each time, and I want the dist/ folder to update on each save.
I added browser-sync and delete.
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var del = require('del');
gulp.task('clean:dist', function() {
return del([
'dist/app.js'
]);
});
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: './dist'
}
});
});
gulp.task("copyIndex", ['clean:dist'], function() {
gulp.src("src/index.html")
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watchFiles', function() {
gulp.watch('src/index.html', ['copyIndex']);
gulp.watch('src/**/*.js', ['babelIt']);
});
gulp.task('default', ['clean:dist', 'es6to5','browserSync','watchFiles']);
I set up a default that will clean out the dist folder then run es6to5. Afterwards I want it to sync and update. I called watchFiles last.
However, I am no longer getting updated js files. The files in the dist folder Are not compiling to es5 and everything is going to a 404.
The task
copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem. Any direction helps.
You have a typo.
It should be gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelIt']);
Anyway i suggest to use gulp-watch instead of the built-in watch function. It has several advantages, mainly it recompile on new file creation.
I am a new to using Gulp, just trying to learn it...Now the problem i get and want to ask is the way to setup default task with watch and browser sync included
I need to know am i doing something wrong
Can anybody improve my code here, i don't understand the relation of watch and browser sync, which tasks to run before browser-sync and when to watch
Below is my folder structure
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var plumber= require('gulp-plumber');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var imagemin = require ('gulp-imagemin');
//scripts task
//uglifies
gulp.task('scripts', function(){
gulp.src('js/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
//compress images
gulp.task('imagemin', function(){
gulp.src('img/**/*.+(png|jpg|gif|svg)')
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('build/img'));
});
//CSS styles
gulp.task('less', function(){
gulp.src('less/style.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('build/css'));
});
gulp.task('cssmin', function(){
gulp.src('build/css/style.css')
.pipe(plumber())
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'))
.pipe(reload({stream:true})); // inject into browsers
});
gulp.task('htmlmin', function(){
return gulp.src('*.html')
.pipe(htmlmin({removeComments: true}))
.pipe(gulp.dest('build'))
.pipe(reload({stream:true})); // inject into browsers
});
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync(['css/*.css', 'js/*.js','less/*.less', 'images/*'],{
server: {
baseDir: "./"
}
});
});
/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['browser-sync' , 'scripts', 'less', 'cssmin', 'htmlmin', 'imagemin'], function () {
/* Watch scss, run the sass task on change. */
gulp.watch(['less/**/*.less'], ['less'])
//Watch css min
gulp.watch(['build/css/*.css'], ['cssmin'])
/* Watch app.js file, run the scripts task on change. */
gulp.watch(['js/*.js'], ['scripts'])
/* Watch .html files, run the bs-reload task on change. */
gulp.watch(['*.html'], ['htmlmin']);
// gulp.watch('app/*.html', browser-sync.reload);
// gulp.watch('app/js/**/*.js', browser-sync.reload);
});
Now the process i want is
Compile less to css and then minify it to build folder
List item
Then Minify my HTML code
Then minify and concatenate my js
Compress all the images (Run only when some images changes)
Run the minified HTML with Browser Sync and watch the changes in all my source HTML,Less, images and JS
I would not worry about minification at this point if your goal is to run in development mode, this applies for imagemin (i would do that offline anyways), cssmin, htmlmin, and your js task that runs uglify by default. Ideally you would want to debug in the browser, and having your code minified will not help you much. If you add a dist task to perform the minification step.
I understand that you need Less to CSS for obvious reasons. So you are looking for something like this:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var sass = require('gulp-less');
// Static Server + watching less/html files
gulp.task('serve', ['less'], function() {
browserSync.init({
server: "./"
});
gulp.watch("less/*.less", ['less']);
gulp.watch("*.html").on('change', browserSync.reload);
});
gulp.task('less', function(){
gulp.src('less/style.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('build/css'))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
This code invokes serve as the main task. Serve task has less as a dependency (which is going to be invoked first). Then, the callback is finally invoked. BrowserSync is initialized and a watch is added for both html files and less files.
Check out this page if you want to learn more about gulp + browsersync integration.
I am using gulp for the very first time.
I managed doing merge streaming for css files but somehow its not working for javascript files.
Here is my code,
gulp.task('styles', () => {
var commonStyles = gulp.src([
'css/website/bootstrap.min.css',
'css/website/font.css'
])
// Concatenate and minify styles
.pipe(minifyCss())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('dist/styles'));
var otherStyles = gulp.src([
'css/website/landing.css',
'css/website/careersNew1.css'
])
.pipe(minifyCss())
.pipe(gulp.dest('dist/styles'));
return merge(commonStyles, otherStyles);
});
// Concatenate and minify JavaScript
gulp.task('scripts', () => {
var commonScript = gulp.src([
'js/scripts/jquery.min.js',
'js/scripts/bootstrap.min.js'
])
.pipe(uglify())
.pipe(concat('style.min.js'))
.pipe(gulp.dest('dist/scripts'));
var otherScript = gulp.src([
'js/bf_scripts.js',
'js/custom_rbox.js'
])
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'));
return merge(commonScript, otherScript);
});
Css output is working fine. But I am not getting any otherScript files in my dist/scripts/ folder
You should only run uglify() on your custom scripts, because the jQuery and Bootstrap versions you're using are already minified/uglified, and that wastes processing time and slows down your build script. Also, I recommend keeping libraries you download in separate folders from the custom code you write. Keep jQuery and Bootstrap in lib folder, and your code in src folder. You can then use wildcard globs to grab all files instead of specifying individual files.
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');
gulp.task('scripts', function() {
// First, uglify custom JS that you wrote
return gulp.src('src/scripts/**/*.js')
.pipe(uglify())
// Now, prepend the already-minfied JS libraries you're importing and concat into style.min.js
.pipe(addsrc.prepend('lib/scripts/**/*.js'))
.pipe(concat('style.min.js'))
.pipe(gulp.dest('dist/scripts'))
})
gulp.task('default', ['scripts'])
try to use buffer before uglify;
var buffer = require('gulp-buffer');
.pipe(buffer())
.pipe(uglify())
I have a Gulp taks like this:
var gulp = require('gulp');
var less = require('gulp-less');
var minifyCss = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function() {
return gulp.src('./less/*.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(minifyCss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./assets/css'));
});
The .css file is created as well as the source map file. However the source map doesn't have the content ("sourcesContent": [null,null,...,null]), which should be the case as the sourcemaps plugin says by default it will include the content (I also tried explicitly setting includeContent to true).
When I remove the minify step it works well and I can see the content of the original less files, so I checked if minify-css supports sourcemaps and according to the plugins list it should.
Am I doing something wrong? Is there any known incompatibility between less and minify-css when generating sourcemaps?
Sourecemaps are pretty young in minifyCSS, and subsequentyl gulp-minify-css and seem to be still buggy to some extend. I haven't found this particular case in the bug tracker, but stumbled upon similar issues when using Sass.
I found a workaround using a similar plugin based on PostCSS. It's not as elegant as the other, but still better than including the CSSClean plugin in LESS ;-)
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var csswring = require('csswring');
gulp.task('less', function() {
return gulp.src('./bower_components/bootstrap/less/bootstrap.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(postcss([csswring]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./assets/css'));
});
alternatively, you could call minifyCSS only for production mode, Sourcemaps only for DEV mode, if your setup allows for it.
I hope this helps!
I'm using gulp-rev to build static files that I can set to never expire. I'd like to replace all references to the generated files in index.html to these renamed files, but I can't seem to find anything that does that like Grunt with usemin.
As far as I can tell right now, I have some options.
Use gulp-usemin2, which depends on gulp-rev. When I go to search Gulp plugins, it says that gulp-usemin2 does too much so I should use gulp-useref instead, but I can't configure gulp-ref to use gulp-rev's output.
Write my own plugin the replace the blocks (scripts & styles) in index.html (and in the CSS) with the generated files.
Any ideas? I don't see why this little use case should be the only thing in my way to replacing Grunt.
Rather than trying to solve this problem multiple gulp steps (which gulp-rev seems to want you to do), I've forked gulp-rev to gulp-rev-all to solve this usecase in one gulp plugin.
For my personal usecase I wanted to rev absolutely everything but as someone else raised an feature request, there should be the ability to exclude certain files like index.html. This will be implemented soon.
I've just written a gulp plugin to do this, it works especially well with gulp-rev and gulp-useref.
The usage will depend on how you've set things up, but it should look something like:
gulp.task("index", function() {
var jsFilter = filter("**/*.js");
var cssFilter = filter("**/*.css");
return gulp.src("src/index.html")
.pipe(useref.assets())
.pipe(jsFilter)
.pipe(uglify()) // Process your javascripts
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(csso()) // Process your CSS
.pipe(cssFilter.restore())
.pipe(rev()) // Rename *only* the concatenated files
.pipe(useref.restore())
.pipe(useref())
.pipe(revReplace()) // Substitute in new filenames
.pipe(gulp.dest('public'));
});
I have confronted the same problem, I tried gulp-rev-all, but it has some path problem, not very free to use.
So I figure out an solution, use gulp-rev and gulp-replace:
At first I have a replace symbol in my html(js, css) files
<link rel="stylesheet" href="{{{css/common.css}}}" />
<script src="{{{js/lib/jquery.js}}}"></script>
in css files
background: url({{{img/logo.png}}})
Second after some compile task, use gulp-replace to replace all the static files reference:
take stylus compile in development as example:
gulp.task('dev-stylus', function() {
return gulp.src(['./fe/css/**/*.styl', '!./fe/css/**/_*.styl'])
.pipe(stylus({
use: nib()
}))
.pipe(replace(/\{\{\{(\S*)\}\}\}/g, '/static/build/$1'))
.pipe(gulp.dest('./static/build/css'))
.pipe(refresh());
});
In production environment, use gulp-rev to generate rev-manifest.json
gulp.task('release-build', ['release-stylus', 'release-js', 'release-img'], function() {
return gulp.src(['./static/build/**/*.css',
'./static/build/**/*.js',
'./static/build/**/*.png',
'./static/build/**/*.gif',
'./static/build/**/*.jpg'],
{base: './static/build'})
.pipe(gulp.dest('./static/tmp'))
.pipe(rev())
.pipe(gulp.dest('./static/tmp'))
.pipe(rev.manifest())
.pipe(gulp.dest('./static'));
});
Then use gulp-replace to replace the refs in static files with rev-manifest.json:
gulp.task('css-js-replace', ['img-replace'], function() {
return gulp.src(['./static/tmp/**/*.css', './static/tmp/**/*.js'])
.pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) {
var manifest = require('./static/rev-manifest.json');
return '/static/dist/'+manifest[p1]
}))
.pipe(gulp.dest('./static/dist'));
});
This helped me gulp-html-replace.
<!-- build:js -->
<script src="js/player.js"></script>
<script src="js/monster.js"></script>
<script src="js/world.js"></script>
<!-- endbuild -->
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
gulp.task('default', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'css': 'styles.min.css',
'js': 'js/bundle.min.js'
}))
.pipe(gulp.dest('build/'));
});
You could do it with gulp-useref like this.
var gulp = require('gulp'),
useref = require('gulp-useref'),
filter = require('gulp-filter'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
rev = require('gulp-rev');
gulp.task('html', function () {
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
return gulp.src('app/*.html')
.pipe(useref.assets())
.pipe(jsFilter)
.pipe(uglify())
.pipe(rev())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(minifyCss())
.pipe(rev())
.pipe(cssFilter.restore())
.pipe(useref.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
or you could even do it this way:
gulp.task('html', function () {
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
return gulp.src('app/*.html')
.pipe(useref.assets())
.pipe(rev())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(minifyCss())
.pipe(cssFilter.restore())
.pipe(useref.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
The problem is updating the asset paths in the html with the new rev file paths. gulp-useref doesn't do that.