I have been working on how to automate the development process using gulp build system.
I am having some issue regarding revisioning of my stylesheets. I have used gulp-rev to generate file with their update revision number but it keeps on creating extra file on any of the changes inside the file which in result increasing my setup size.
gulpfile.js
var gulp = require('gulp');
var watchLess = require('gulp-watch-less');
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var watch = require('gulp-watch');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var revAppend = require('gulp-rev-append');
//LESS
gulp.task('less', function() {
return gulp.src('assets/less/*.less')
.pipe(watchLess('assets/less/*.less'))
.pipe(less())
.pipe(autoprefixer({
browsers: ['> 0%'],
cascade: false
}))
.pipe(cleanCSS())
.pipe(gulp.dest('assets/css/'))
.pipe(rev())
.pipe(gulp.dest('assets/css/'))
.pipe(revAppend())
.pipe(gulp.dest('assets/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('assets/'));
});
//Watch
gulp.task('watch', function(){
gulp.watch('assets/less/*.less', ['less']);
})
//Default
gulp.task('default', ['watch']);
I need help in creating the latest file with the update changes and remove the previous file from the file directory or something which will give me only on file with the latest update/changes in it.
I have also used several other rev related plugin but din't find the correct way to config it
Well, you have four pipes with destination locations.
.pipe(gulp.dest('assets/css/'))
.pipe(gulp.dest('assets/css/'))
.pipe(gulp.dest('assets/css'))
.pipe(gulp.dest('assets/'));
Three of them with the same destination. Expect to have three copies of all the files in the pipe at different stages. With gulp-rev you need an extra pipe for the manifest, but that still leaves us with 2 instead of 4.
Try:
//LESS
gulp.task('less', function() {
return gulp.src('assets/less/*.less')
.pipe(watchLess('assets/less/*.less'))
.pipe(less())
.pipe(autoprefixer({
browsers: ['> 0%'],
cascade: false
}))
.pipe(cleanCSS())
.pipe(rev())
.pipe(revAppend())
.pipe(gulp.dest('assets/css'))
// WARNING!!! Put the manifest after all the file pipes
.pipe(rev.manifest())
.pipe(gulp.dest('assets/'));
});
Here is post on re-visioning in case you want to revision your package and leave file revision responsibilities to your source control, or build server.
Related
I am pretty new at Gulp (v.4.0.2), so I can't understand is there any kind of cache mechanism inside it (at least I can't find such a piece of information on Google). After running my "gulp" command styles.css file being created, but if I do changes in SASS file and the try to run the same command again I won't get a new generated file. I tried to delete styles.css file and run the command again - the file was generated, but with the old content. I can even see that the modification date of the generated file is being left from the old file.
My gulpfile.js:
const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const del = require('del');
gulp.task('styles', () => {
return gulp.src('app/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(cssnano())
.pipe(gulp.dest('app/css'));
});
gulp.task('clean', () => {
return del([
'app/css/styles.css',
]);
});
gulp.task('default', gulp.series(['clean', 'styles']));
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.
Trying to use main-bower-files and filters to copy files from bower_components. So far its working except for less. All it is taking is bootstrap.less and not all the .less files.
var gulp = require('gulp'),
gutil = require('gulp-util'),
gulpFilter = require('gulp-filter'),
bowerMain = require('main-bower-files'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
// Group tasks
gulp.task('default', function() {
gutil.log("Test");
});
// Individual tasks
gulp.task('bower', function() {
var jsFilter = gulpFilter('*.js', {restore: true}),
lessFilter = gulpFilter('*.less');
return gulp.src(bowerMain())
// JS
.pipe(jsFilter)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./public/js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./public/js'))
.pipe(jsFilter.restore)
// CSS
.pipe(lessFilter)
//.pipe(concat('styles.css'))
.pipe(gulp.dest('./temp'))
});
If I gutil.log bowerMain and its not showing all the less files. What am I doing wrong here?
if you check the main section of bower.json for bootstrap it shows below
"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
],
its containing only boostrap.less hence you see only that one less file. Hence nothing wrong with what you are doing...
you can override the main section of boostrap in your bower.json to include other less files if you want, read on how to do it here
I've written a nice little build script that runs some pretty standard tasks like...
Cleaning out my deploy/ directory before initially
Building, concatenation, uglifying, and copying files from their dev/ directories to associated deploy/ directories
Watching for changes
etc.
But for better context, I've included just included it below:
var gulp = require('gulp');
var changed = require('gulp-changed');
var newer = require('gulp-newer');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var imagemin = require('gulp-imagemin');
var shopify = require('gulp-shopify-upload');
var watch = require('gulp-watch');
var rename = require('gulp-rename');
var filter = require('gulp-filter');
var flatten = require('gulp-flatten');
var del = require('del');
var argv = require('yargs').argv;
var runsequence = require('run-sequence');
var config = require('./config.json');
var plumberErrorHandler = {
errorHandler: notify.onError({
title: 'Gulp',
message: "Error: <%= error.message %>"
})
};
gulp.task('styles', function() {
return gulp.src(['dev/styles/updates.scss'])
.pipe(plumber(plumberErrorHandler))
.pipe(sourcemaps.init())
.pipe(sass({ errLogToConsole: true }))
.pipe(autoprefixer({ browsers: ['last 2 versions', 'ie >= 10', 'Android >= 4.3'] }))
.pipe(cssmin())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.css', extname: '.liquid' }))
.pipe(gulp.dest('deploy/assets'));
});
gulp.task('scripts', function() {
return gulp.src(['dev/scripts/**'])
.pipe(plumber(plumberErrorHandler))
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.js', extname: '.liquid' }))
.pipe(gulp.dest('deploy/assets'));
});
gulp.task('vendor', function() {
var styles = filter(['styles/**/*.scss']);
var scripts = filter(['scripts/**/*.js']);
return gulp.src(['dev/vendor/**'])
.pipe(plumber(plumberErrorHandler))
.pipe(styles)
.pipe(sass({ errLogToConsole: true }))
.pipe(cssmin())
.pipe(styles.restore())
.pipe(scripts)
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(scripts.restore())
.pipe(flatten())
.pipe(gulp.dest('deploy/assets'));
});
gulp.task('copy', function() {
return gulp.src(['dev/liquid/**'], {base: 'dev/liquid'})
.pipe(plumber(plumberErrorHandler))
.pipe(newer('deploy/'))
.pipe(gulp.dest('deploy/'));
});
gulp.task('clean', function(cb) {
del(['deploy/**/*'], cb);
});
gulp.task('imagemin', function() {
return gulp.src(['dev/liquid/assets/*'])
.pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
.pipe(gulp.dest('dev/liquid/assets/'));
});
gulp.task('build', ['clean'], function(cb) {
runsequence(['copy', 'styles', 'scripts', 'vendor'], cb);
});
gulp.task('watch', ['build'], function() {
gulp.watch(['dev/styles/**/*.scss'], ['styles']);
gulp.watch(['dev/scripts/**/*.js'], ['scripts']);
gulp.watch(['dev/vendor/**/*.{js,scss}'], ['vendor']);
gulp.watch(['dev/liquid/**'], ['copy']);
});
gulp.task('upload', ['watch'], function() {
if (!argv.env) {
return false;
} else if (argv.env && config.shopify.hasOwnProperty(argv.env)) {
env = config.shopify[argv.env];
} else {
env = config.shopify.dev;
}
return watch('deploy/{assets|layout|config|snippets|templates|locales}/**')
.pipe(shopify(env.apiKey, env.password, env.url, env.themeId, env.options));
});
gulp.task('default', ['clean', 'build', 'watch', 'upload']);
The problem I've been running into is directly related to the upload task and copy task.
When running gulp --env [environment-name] (e.g. gulp --env staging) or just gulp --env, some of the time when I save a file living in one of the subdirectories of dev/liquid/, the copy task runs as expected, and the singular saved and copied file is then uploaded via. the upload task. However, occasionally I'll save a file and the copy task runs as usual, but then the watch upload freaks out and tries uploading every file inside of deploy/ (which causes an api call limit error, which naturally gives me problems).
I originally had used gulp-changed inside of my copy task, but then noticed that it only will do 1:1 mappings and not directories (not sure how correct I am on this). So I switched to gulp-newer, and things worked for a while, but then things started freaking out again.
I can't figure out what's causing this, I have my suspicions but I can't figure out how to act on them. Any advice, observations, suggestions for improvements, good places for a romantic dinner, reliable pet-sitter, etc. would be greatly appreciated.
tytytytyty!!!
_t
Edit: I've been having a hard time reproducing the freakout (i.e. all files trying to upload at once), and at times running the same gulp --env staging causes a freak out, and other times firing up the same task on the same set of files does nothing. Maybe it could possibly have something to do with gulp-newer and gulp-changed's use of date modified as its comparison??
Double Edit: Maybe it's a race condition cause it works sometimes, and sometimes not? I remember seeing something on the node-glob or minimatch github pages about race conditions....
I'm trying to get Susy to work with gulp-sass (libsass) and sourcemaps. It's the sourcemaps that seems to be the problem, since without them, everything works as it should. I tried adding the IncludePaths to the Sass task but that didn't help. Susy is installed with Bower and resides in assets/bower_components/susy.
The error I'm getting looks like this:
c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_mo
dules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-ma
p\lib\source-map\source-map-consumer.js:415
throw new Error('"' + aSource + '" is not in the SourceMap.');
^
Error: "/bower_components/susy/sass/susy/language/susy/_container.scss" is not i
n the SourceMap.
at SourceMapConsumer_sourceContentFor [as sourceContentFor] (c:\Users\Devote
e\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-mini
fy-css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-ma
p\source-map-consumer.js:415:13)
at SourceMapGenerator.<anonymous> (c:\Users\Devotee\hemsidor\vvv\www\bb2-new
-homepage\htdocs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-
sourcemaps-apply\node_modules\source-map\lib\source-map\source-map-generator.js:
233:42)
at Array.forEach (native)
at SourceMapGenerator_applySourceMap [as applySourceMap] (c:\Users\Devotee\h
emsidor\vvv\www\new-project\htdocs\app\themes\bb2\node_modules\gulp-minify-
css\node_modules\vinyl-sourcemaps-apply\node_modules\source-map\lib\source-map\s
ource-map-generator.js:232:34)
at applySourceMap (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs
\app\themes\bb2\node_modules\gulp-minify-css\node_modules\vinyl-sourcemaps-apply
\index.js:23:15)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:122:11
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\index.js:42:7
at whenSourceMapReady (c:\Users\Devotee\hemsidor\vvv\www\new-project\ht
docs\app\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\clea
n.js:94:62)
at c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app\themes\bb2\
node_modules\gulp-minify-css\node_modules\clean-css\lib\clean.js:100:77
at fromString (c:\Users\Devotee\hemsidor\vvv\www\new-project\htdocs\app
\themes\bb2\node_modules\gulp-minify-css\node_modules\clean-css\lib\utils\input-
source-map-tracker.js:25:10)
Sorry for the horrible formatting (Bash on Windows..).
My Gulpfile looks like this:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// ==== CONFIGURATION ==== //
// Project paths
var src = 'assets/',
dist = 'dist/',
bower = src + 'assets/bower_components/',
css = dist + 'css/',
js = dist + 'js/'
;
// ### JS-linting-compiling
// Lint and minify our Javascript files
gulp.task('js-linting-compiling', function(){
// read all of the files that are in script/lib with a .js extension
return gulp.src('assets/js/*.js')
// run their contents through jshint
.pipe(jshint())
// report any findings from jshint
.pipe(jshint.reporter('default'))
// concatenate all of the file contents into a file titled 'all.js'
.pipe(concat('all.js'))
// write that file to the dist/js directory
.pipe(gulp.dest(js))
// now rename the file in memory to 'all.min.js'
.pipe(rename('all.min.js'))
// run uglify (for minification) on 'all.min.js'
.pipe(uglify())
// write all.min.js to the dist/js file
.pipe(gulp.dest(js));
});
// ### SASS-TO-CSS
// `gulp sass-to-css` - Compile SASS into CSS, autoprefix it and minify it. Also generate source maps (stripped in minified version)
gulp.task('sass-to-css', function () {
gulp.src('assets/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
'assets/bower_components/susy/sass'
],
style: 'expanded',
errLogToConsole: true
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({
suffix: '_min'
}))
.pipe(minifyCSS({
keepSpecialComments:0,
}))
.pipe(gulp.dest(css))
.pipe(reload({stream: true}));
});
// ### Clean
// `gulp clean` - Clean our dist folder before we generate new content into it
gulp.task('clean', function (cb) {
del([
// here we use a globbing pattern to match everything inside the `dist` folder, except our gitkeep file
'dist/**/*',
'!dist/.gitkeep{,/**}'
], { dot: true },
cb);
});
// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['sass-to-css', 'js-linting-compiling'], function() {
});
// ### Gulp
// `gulp` - Clean up the dist directory and do a complete build.
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
browserSync({
proxy: "local.project.dev",
host: "localhost",
notify: true,
});
gulp.watch(['assets/sass/**/*.scss'], ['sass-to-css']);
gulp.watch(['assets/js/**/*.js'], ['js-linting-compiling']);
gulp.watch('**/*.php', function() {
browserSync.reload();
});
});
Any ideas?
I had the same issue...
Trying to use the includePaths,
the #import in the sass file....
mixing one then the other then both ...
The only thing that has worked for me was moving from susy from bower_components to my sass folder, use a "normal" #import, and it worked.
I am not expert in gulp / node, it might look like a path issue => bower_components is outside the src definition of the gulp task... :/
Hope that helps