How to use vue.js with gulp? - gulp

I'm working with a small project using gulp and I want to learn about vue.js, so I want to use vue.js in this project, but I don't know how to configure vue.js in the gulpfile.js
I want to know how to configure gulpfile to use vue.js
My gulpfile.js
var env = require('minimist')(process.argv.slice(2)),
gulp = require('gulp'),
gutil = require('gulp-util'),
plumber = require('gulp-plumber'),
jade = require('gulp-jade'),
browserify = require('gulp-browserify'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
gulpif = require('gulp-if'),
stylus = require('gulp-stylus'),
jeet = require('jeet'),
rupture = require('rupture'),
koutoSwiss = require('kouto-swiss'),
prefixer = require('autoprefixer-stylus'),
modRewrite = require('connect-modrewrite'),
imagemin = require('gulp-imagemin'),
karma = require('gulp-karma'),
cache = require('gulp-cache'),
rsync = require('rsyncwrapper').rsync;
// Call Jade for compile Templates
gulp.task('jade', function () {
return gulp.src('src/templates/*.jade')
.pipe(plumber())
.pipe(jade({pretty: !env.p}))
.pipe(gulp.dest('build/'));
});
gulp.task('copy', function() {
return gulp.src(['src/*.html', 'src/*.txt'])
.pipe(gulp.dest('build/'))
});
// Call Uglify and Concat JS
gulp.task('js', function () {
return gulp.src('src/js/**/*.js')
.pipe(plumber())
.pipe(concat('main.js'))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
// Call Uglify and Concat JS
gulp.task('browserify', function () {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({debug: !env.p}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});
// Call Stylus
gulp.task('stylus', function () {
gulp.src('src/styl/main.styl')
.pipe(plumber())
.pipe(stylus({
use:[koutoSwiss(), prefixer(), jeet(), rupture()],
compress: env.p,
}))
.pipe(gulp.dest('build/css'));
});
// Call Imagemin
gulp.task('imagemin', function () {
return gulp.src('src/img/**/*')
.pipe(plumber())
.pipe(cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true})))
.pipe(gulp.dest('build/img'));
});
// Call Watch
gulp.task('watch', function () {
gulp.watch('src/templates/**/*.jade', ['jade']);
gulp.watch('src/styl/**/*.styl', ['stylus']);
gulp.watch('src/js/**/*.js', [(env.fy) ? 'browserify' : 'js']);
gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']);
});
gulp.task('browser-sync', function () {
var files = [
'build/**/*.html',
'build/css/**/*.css',
'build/img/**/*',
'build/js/**/*.js',
];
browserSync.init(files, {
server: {
baseDir: './build/',
},
});
});
// Rsync
gulp.task('deploy', function () {
rsync({
ssh: true,
src: './build/',
dest: 'user#hostname:/path/to/www',
recursive: true,
syncDest: true,
args: ['--verbose'],
},
function (erro, stdout, stderr, cmd) {
gutil.log(stdout);
});
});
// Default task
gulp.task('default', [(env.fy) ? 'browserify' : 'js', 'jade', 'copy', 'stylus', 'imagemin', 'watch', 'browser-sync']);
// Build and Deploy
gulp.task('build', [(env.fy) ? 'browserify' : 'js', 'jade', 'copy', 'stylus', 'imagemin', 'deploy']);

Vueify is a browserify transform; gulp-browserify isn't maintained anymore but I assume that you can still add vueify as a transform once it's installed:
gulp.task('browserify', function () {
return gulp.src('src/js/main.js')
.pipe(plumber())
.pipe(browserify({
debug: !env.p,
transform: ['vueify']
}))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});

Check this out:
This is a package which lets you setup gulp task for vue.js.
https://www.npmjs.com/package/gulp-vueify

Using:
.pipe(babel({presets: ['es2015']}))
On a normal gulp task helped me concat and uglify my vue.js files.
If this is what you meant, then you will also need to install babel with npm and add:
var babel = require('gulp-babel');

Related

Gulp.js Watch not picking up changes in SASS

My gulp runs with no errors, but does not pick up any changes to the SASS. If I stop gulp and re-run, it compiles the sass fine. Here is my gulp file.
var gulp = require('gulp'),
gutil = require('gulp-util'),
browserify = require('gulp-browserify'),
concat = require('gulp-concat');
gulpif = require('gulp-if');
uglify = require('gulp-uglify');
bower = require('gulp-bower');
sass = require('gulp-sass');
imagemin = require('gulp-imagemin');
pngcrush = require('imagemin-pngcrush');
livereload = require('gulp-livereload');
// Create gulp plugins from node install
// npm install --save-dev gulp-**
var jsSources,
sassSources,
outputDir,
sassStyle
// Create variables for enviroments
env = process.env.NODE_ENV || 'development';
if (env==='development') {
outputDir = './';
sassStyle = 'expanded';
} else {
outputDir = './';
sassStyle = 'compressed';
}
// Conditions for development and production enviroments
jsSources = ['js/*.js'];
sassSources = ['scss/style.scss'];
imageSources = ['images/**/*.*'];
bowerDir = ['bower_components/'];
// Paths to files
gulp.task('js', function() {
gulp.src(jsSources)
.pipe(concat('scripts.js'))
.pipe(browserify())
.pipe(gulpif (env === 'production', uglify()))
.pipe(gulp.dest('./'))
});
// Concat all javascript files
gulp.task('images', function() {
gulp.src(imageSources)
.pipe(gulpif (env === 'production', imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
})))
.pipe(gulpif (env === 'production', gulp.dest(outputDir + 'images')))
});
// Compress all images
gulp.task('css', function() {
gulp.src(sassSources)
.on('error', function(error) {
console.log('Error: ' + error.message);
})
.pipe(sass({outputStyle: sassStyle})
.on('error', sass.logError)
)
.pipe(gulp.dest(outputDir));
});
gulp.task('watch', function() {
livereload.listen()
gulp.watch(jsSources, ['js']);
gulp.watch(imageSources, ['images']);
gulp.watch('scss/*.scss', ['css']);
});
// Watch task, looks for changes and automatically updates.
gulp.task('default', ['js', 'css', 'images', 'watch']);
// Runs all tasks
Can anyone see anything that would cause this issue for me?

Gulp BrowserSync not working with SCSS

My gulp setup with browsersync seems to have a problem with detecting changes for SCSS files. It works perfectly fine for SLIM with reload and detection. There's no error with the gulp. The only problem is the browsersync fail to detect changes in SCSS file and reload or inject changes.
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
slim = require('gulp-slim'),
autoprefix = require('gulp-autoprefixer'),
notify = require('gulp-notify'),
bower = require('gulp-bower'),
image = require('gulp-image'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
browserSync = require('browser-sync').create();
var config = {
sassPath: './source/sass',
slimPath: './source/slim',
bowerDir: './bower_components',
jsPath: './source/js'
}
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest(config.bowerDir))
});
gulp.task('js', function() {
return gulp.src('./source/js/**/*.js')
.pipe(concat('script.js'))
.pipe(gulp.dest('./dist/js'));
});
gulp.task('icons', function() {
return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('./dist/fonts'));
});
gulp.task('image', function () {
gulp.src('./source/images/*')
.pipe(image())
.pipe(gulp.dest('./dist/images'));
} );
gulp.task('css', function() {
return sass('./source/scss/**/*.scss', {
style: 'compressed',
loadPath: [
'./source/scss',
config.bowerDir + '/bootstrap/scss',
config.bowerDir + '/font-awesome/scss',
]
}).on("error", notify.onError(function (error) {
return "Error: " + error.message;
}))
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.stream());
});
gulp.task('html', function() {
gulp.src('./source/slim/**/*.slim')
.pipe(slim({
pretty: true
}))
.pipe(gulp.dest('./dist/'));
});
gulp.task('serve', ['css', 'html', 'js'], function() {
browserSync.init({
injectChanges: true,
server: "./dist"
});
gulp.watch(config.sassPath + '/**/*.scss', ['css']);
gulp.watch(config.slimPath + '/**/*.slim', ['html']).on('change', browserSync.reload);;
});
gulp.task('default', ['bower','js', 'icons', 'css', 'html', 'image', 'serve']);
gulp.task('build',['bower', 'js', 'icons', 'css', 'html', 'image'] );
This might not be the answer you are looking for but its the work around that I've been using since I ran into a similar issue using browserSync.stream() not firing off consistently.
'use strict';
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
gulp.task('serve',function(){
browserSync.init({
server: {
baseDir: './dev/'
},
files: ['./dev/**/*.html',
'./dev/css/**/*.css',
'./dev/js/**/*.js',
'./dev/img/**/*.*'],
notify: false
});
});
As you can see, this uses browserSyncs own watch task as opposed to piping it through the entire build process, which can have its own advantages by making the serve task easily abstracted and pulled into another project.
Hope this helps.

Gulp - how to delete build directory before running other tasks

I got this Gulp file where I'm running various tasks.
I would like to delete the contents of my build directory before running any other tasks but can't work out how to do this.
I've tried lots of various ways I found when searching for a solution to this but can't get it to work.
Here is my Gulp file:
// List required plugins
var gulp = require('gulp'),
del = require('del'),
uglify = require('gulp-uglify'),
postcss = require('gulp-postcss'),
lost = require('lost'),
nano = require('gulp-cssnano'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
mixins = require('postcss-mixins'), // Must go before other plugins in the PostCSS task
nested = require('postcss-nested'),
vars = require('postcss-simple-vars'),
partials = require('postcss-import'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
browserSync = require('browser-sync').create();
// Config - Paths and other config
var src = {
cssDir: 'src/css/**/*.css',
jsDir: 'src/js/**/*.js',
imgDir: 'src/img/*',
svgDir: 'src/img/svg/**/*.svg',
htmlDir: 'src/**/*.html',
srcDir: 'src/',
},
build = {
buildDir: 'build/',
cssDir: 'build/assets/css/',
htmlDir: 'build/**/*.html',
jsDir: 'build/assets/js/',
imgDir: 'build/assets/img/',
},
options = {
autoprefix: { browsers: ['last 2 versions'] },
imagemin: { optimizationLevel: 7, progressive: true, interlaced: true, svgoPlugins: [ {removeViewBox: false}, {cleanupIDs: false} ], use: [pngquant()] },
port: '80',
};
// Error handling function
// Thanks to https://cameronspear.com/blog/how-to-handle-gulp-watch-errors-with-plumber/
var onError = function(err) {
gutil.beep();
console.log(err);
this.emit('end');
}
// Clean task
gulp.task('clean:build', function () {
return del([
build.buildDir,
]);
});
// Copy HTML to Build
gulp.task('html', function () {
return gulp.src(src.htmlDir)
.pipe(plumber({
errorHandler: onError
}))
.pipe(gulp.dest(build.buildDir))
.pipe(browserSync.stream());
});
// BrowserSync Server + watching files for changes
gulp.task('server', function() {
browserSync.init({
server: {
baseDir: build.buildDir
},
port: options.port,
});
});
// PostCSS Task
gulp.task('css', function () {
var processors = [
partials(),
lost(),
autoprefixer({ browsers: ['last 2 version'] }),
mixins(),
nested(),
vars(),
mqpacker(), // Make sure mqpacker is last!
];
return gulp.src(src.cssDir)
.pipe(plumber({
errorHandler: onError
}))
.pipe(sourcemaps.init())
.pipe(postcss(processors))
//.pipe(nano()) - Disable minification during development
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(build.cssDir))
.pipe(browserSync.stream());
});
// JS Task
gulp.task('compressJS', function() {
return gulp.src(src.jsDir)
.pipe(plumber({
errorHandler: onError
}))
.pipe(uglify())
.pipe(gulp.dest(build.jsDir))
.pipe(browserSync.stream());
});
// Image Task
gulp.task('imagemin', function() {
return gulp.src(src.imgDir)
.pipe(plumber({
errorHandler: onError
}))
.pipe(imagemin(
options.imagemin
))
.pipe(gulp.dest(build.imgDir))
.pipe(browserSync.stream());
});
gulp.task('watch', function () {
gulp.watch(src.cssDir, ['css']);
gulp.watch(src.jsDir, ['compressJS']);
gulp.watch(src.htmlDir, ['html']);
gulp.watch(src.imgDir, ['imagemin']);
});
gulp.task('default', ['html', 'imagemin', 'compressJS', 'server', 'watch']);
How should I do to run the task clean:build before any other tasks but only run it once. Or is there a better way of cleaning out files before running a build?
Thanks!!
Have your tasks depend on your clean task:
gulp.task('html', ['clean:build'], function() { ... })
this is how i do it.
var del = require('del') ;
gulp.task('delete-build-folder', function(cb) {
return del([config.buildDir], cb);
});
gulp.task('default', ['delete-build-folder'], function() {
console.log('building.....');
gulp.start('copy-html', 'copy-html-views');
});

Get Gulp pipes of dependencies

I have a gulpfile with some tasks. All task are combined in a default task, that has dependencies to all others tasks. I want to add a deploy task. The deploy can take a list of files. I want only deploy changed files.
Is there a way to get the pipes of all dependencies? Or any other way, without merge everything into one task?
Here a simple sample to explain:
var gulp = require('gulp');
var concat = require('gulp-concat');
var debug = require('gulp-debug');
var newer = require('gulp-newer');
gulp.task('default', ['js', 'css']);
gulp.task('js', function () {
return gulp.src('./app/**/*.js')
.pipe(newer('./dist/app.js'))
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('css', function () {
gulp.src('./app/**/*.css')
.pipe(newer('./dist/style.css'))
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('deploy', ['default'], function () {
gulp.src('./dist/*')
// Here I want only files changed in dist
.pipe(debug());
});
Update:
Here some more of my task:
gulp.task('default', ['js', 'css', 'images', 'templates']);
gulp.task('images', function () {
return gulp.src('./app/images/*')
.pipe(newer('./dist/app/images'))
.pipe(gulp.dest('./dist/app/images'));
gulp.task('templates', function () {
return gulp.src('./app/**/*.html')
.pipe(newer('./dist/app/templates.js'))
.pipe(minifyHTML({ empty: true }))
.pipe(templateCache({ module: 'app' }))
.pipe(uglify())
.pipe(gulp.dest('./dist/app'));
I added a deployed folder, where i keep track of all files that a deployed.
var gulp = require('gulp');
var concat = require('gulp-concat');
var debug = require('gulp-debug');
var newer = require('gulp-newer');
gulp.task('default', ['js', 'css']);
gulp.task('js', function () {
return gulp.src('./app/**/*.js')
.pipe(newer('./dist/app.js'))
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('css', function () {
gulp.src('./app/**/*.css')
.pipe(newer('./dist/style.css'))
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/'));
});
gulp.task('deploy', ['default'], function () {
gulp.src('./dist/*')
.pipe(newer('./deployed'))
.pipe(debug())
.pipe(gulp.dest('./deployed'))
});

Gulp not watching files with gulp-watch plugin

I'm trying to rebuild only files that change in my gulpfile.js by using this recipe via the gulp-watch plugin. The problem is when I run my default task gulp, it doesn't watch the files at all after saving any of the files I want it to watch. What am I doing wrong here in my gulpfile.js? Thanks in advance.
/* ----------------------------------------------------- */
/* Gulpfile.js
/* ----------------------------------------------------- */
'use strict';
// Setup modules/Gulp plugins
var gulp = require('gulp'),
del = require('del'),
runSequence = require('run-sequence'),
less = require('gulp-less'),
// minifyCSS = require('gulp-minify-css'),
fileinclude = require('gulp-file-include'),
order = require('gulp-order'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
sourcemaps = require('gulp-sourcemaps'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch'),
// browserify = require('browserify'),
// sourceStream = require('vinyl-source-stream'),
connect = require('gulp-connect');
// Configure file paths
var path = {
DEST: 'dist/',
SRC: 'src/',
INCLUDES: 'include/',
LESS_SRC: 'src/frontend/less/',
LESS_MANIFEST: 'src/frontend/less/all.less',
CSS_DEST: 'dist/frontend/css/',
JS_SRC: 'src/frontend/js/',
JS_MINIFIED_OUT: 'all.js',
JS_DEST: 'dist/frontend/js',
IMG_SRC: 'src/frontend/img/',
IMG_DEST: 'dist/frontend/img/',
};
// Clean out build folder each time Gulp runs
gulp.task('clean', function (cb) {
del([
path.DEST
], cb);
});
// Compile LESS
gulp.task('less', function(){
return gulp.src(path.LESS_MANIFEST)
.pipe(watch(path.LESS_MANIFEST))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(path.CSS_DEST))
.pipe(connect.reload());
});
// Allow HTML files to be included
gulp.task('html', function() {
return gulp.src([path.SRC + '*.html'])
.pipe(watch(path.SRC + '*.html'))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(fileinclude({
prefix: '##',
basepath: path.INCLUDES
}))
.pipe(gulp.dest(path.DEST))
.pipe(connect.reload());
});
// Concatenate and minify JavaScript
gulp.task('js', function() {
return gulp.src(path.JS_SRC + '**/*.js')
.pipe(watch(path.JS_SRC + '**/*.js'))
.pipe(order([
path.JS_SRC + 'framework/*.js',
path.JS_SRC + 'vendor/*.js',
path.JS_SRC + 'client/*.js'
], {base: '.'} ))
.pipe(concat(path.JS_MINIFIED_OUT))
.pipe(uglify())
.pipe(gulp.dest(path.JS_DEST))
.pipe(connect.reload());
});
// Minify images
gulp.task('imagemin', function () {
return gulp.src(path.IMG_SRC + '**/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()]
}))
.pipe(gulp.dest(path.IMG_DEST));
});
// Copy folders
gulp.task('copy', function() {
gulp.src(path.SRC + 'extjs/**/*')
.pipe(gulp.dest(path.DEST + 'extjs/'));
// Copy all Bower components to build folder
gulp.src('bower_components/**/*')
.pipe(gulp.dest('dist/bower_components/'));
});
// Connect to a server and livereload pages
gulp.task('connect', function() {
connect.server({
root: path.DEST,
livereload: true
});
});
// Organize build tasks into one task
gulp.task('build', ['less', 'html', 'js', 'imagemin', 'copy']);
// Organize server tasks into one task
gulp.task('server', ['connect']);
// Default task
gulp.task('default', function(cb) {
// Clean out dist/ folder before everything else
runSequence('clean', ['build', 'server'],
cb);
});
Try and remove the watch from your build tasks, and have separate tasks that handle the watching. Something like:
gulp.task("watch-less", function() {
watch(path.LESS_MANIFEST, function () {
gulp.start("less");
));
});
That way, it'll just trigger the task when a file changes. And the task for watching is able to be run separate from your build (which will also make your life easier if you use some form of build automation).
Also, you can specify many watch tasks, like so:
gulp.task("watch", function() {
watch(paths.FOO, function() {
gulp.start("foo");
});
watch(paths.BAR, function() {
gulp.start("bar");
});
});