Gulp, concat and uglify files and concat with vendor - gulp

I want to concat and uglify my JS files with gulp. After that I want to conact the result with a vendor folder which includes jquery, bootstrap, ...
How can I concat the files from the vendor folder after uglify my js code?
Here is my current gulp file:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('scripts', function() {
gulp.src([
'./src/resources/assets/js/**/*.js',
'!./src/resources/assets/js/vendor/**/*.js'
])
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('./public/js/'));
});
gulp.task('default', ['scripts'], function() {
});

if I understand your question correctly, you want to concat your js.files with the libraries, but keep a concat version of your own js ?
I would do that, you get to keep both files :
var runSequence = require('run-sequence');
gulp.task('myJs', function() {
gulp.src([
'./src/resources/assets/js/**/*.js',
'!./src/resources/assets/js/vendor/**/*.js'
])
.pipe(concat('myJs.js'))
.pipe(uglify())
.pipe(gulp.dest('./public/js/'));
});
gulp.task('allJs', function() {
gulp.src([
'./src/resources/assets/js/vendor/**/*.js',
'./public/js/myJs.js'
])
.pipe(concat('allJs.js'))
.pipe(uglify())
.pipe(gulp.dest('./public/js/'));
})
gulp.task('default', function() {
runSequence('myJs',
'allJs',
);
});
or that, you only keep one file :
var merge = require('merge2');
gulp.task('scripts', function() {
// Get your js
var myJs = gulp.src([
src + 'my/*.js',
src + '!not/my/*.js'])
// Get vendor js
var vendorJs = gulp.src(src + 'not/my/*.js')
return merge(myJs, vendorJs)
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest(dest));
});

Related

Move font awesome fonts from bower using gulp task

I am trying to move all the font-awesome fonts from the bower_components folder to my build directory, but the task isn't copying any files.
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify');
var config = {
bowerDir: 'bower_components'
}
gulp.task('fa', function() {
return
gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('assets/fonts/font-awesome/'));
});
When I run gulp fa it runs fine, but no files appear in my assets/fonts/font-awesome directory.
I know the .pipe(gulp.dest()) function works because I have a scripts function like so:
gulp.task('scripts', function(){
return gulp.src([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'bower_components/foundation/js/foundation.min.js',
'assets/js/custom/app.js',
])
.pipe(concat('app.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(notify({
message: 'Scripts minified'
}));
});
Any ideas?
EDIT
My folder structure is like this:
assets/
--fonts/
----font-awesome/
gulpfile.js
bower_components/
--font-awesome/
----fonts/
------fontawesome-webfont.eot
------fontawesome-webfont.svg
------fontawesome-webfont.ttf
------fontawesome-webfont.woff
------fontawesome-webfont.woff2
I want to suggest to use gulp-copy
var copy = require('gulp-copy');
gulp.task('copy', function() {
gulp.src(['bower_components/font-awesome/fonts/*.*'])
.pipe(copy('assets/fonts/font-awesome/', { prefix: 3}));
});

Gulp watch doesn't not compile my .scss at each modification

I encounter a problem with Gulp, I can not compile my .scss at each modification. When I run "gulp watch" and make changes in my css, nothing happens.
gulp css works, gulp watch doesn't work.
Yet everything looks good.
Do you have an idea ?
Thanks !
// Requires
var gulp = require('gulp');
// Include plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
// var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
// tâche CSS = compile vers knacss.css et knacss-unminified.css
gulp.task('css', function () {
return gulp.src('./src/assets/css/style.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(rename('knacss.css'))
.pipe(gulp.dest('./dist/assets/css/'))
.pipe(rename('style.css'))
//.pipe(sourcemaps.init())
.pipe(minifycss())
//.pipe(sourcemaps.write('.', {includeContent: false}))
.pipe(gulp.dest('./dist/assets/css/'));
});
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['css']);
});
gulp.task('default', ['css']);
Gulp watch doesn't not compile my .scss at each modification
That's because you don't tell it to.
You are only watching *.scss files in ./src/assets/css, not in subfolders.
To include subfolders, use this syntax:
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/**/*.scss'], ['css']);
});
try with something like.
//SASS task
gulp.task('sass', function () {
var sassPath = {
cssSrc: ['./src/assets/css/*.scss'], cssDest: './src/assets/css/'
};
gulp.src(sassPath.cssSrc)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(sassPath.cssDest))
.pipe(livereload());
});
and then in your watch:
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['sass']);
});
and:
gulp.task('default', ['sass','css']);

Gulp ignoring input files

This is my gulpfile:
// including plugins
var gulp = require('gulp')
, rename = require('gulp-rename')
, uglify = require("gulp-uglify")
, cssmin = require("gulp-cssmin");
// task css
gulp.task('minify-css', function () {
gulp.src([
'./www/assets/css/bootstrap.min.css',
'./www/assets/css/admin.css',
'!./www/assets/css/build.min.css'
])
.pipe(cssmin())
.pipe(rename('build.min.css'))
.pipe(gulp.dest('./www/assets/css'));
});
// task js
gulp.task('minify-js', function () {
gulp.src([
'./www/assets/js/jquery.min.js',
'./www/assets/js/boostrap.min.js',
'./www/assets/js/vue.min.js',
'./www/assets/js/vue-resource.min.js',
'./www/assets/js/MiniModel.js',
'./www/assets/js/AdminUsers.js',
'!./www/assets/js/build.min.js'
])
.pipe(uglify())
.pipe(rename('build.min.js'))
.pipe(gulp.dest('./www/assets/js'));
});
gulp.task('default', ['minify-css', 'minify-js']);
After run ./node_modules/.bin/gulp the output is:
build.css only has admin.css
build.js only has AdminUsers.js
Why is missing a lot of source files on output?
More details:
Ubuntu: 14.10
Node version: v0.10.25
Gulp version: 3.9.1
UPDATE1: Im using in index.html like this:
<script type="text/javascript" src="/mini-vue/www/assets/js/build.min.js"></script>
<script type="text/javascript">
var usersmodel = new MiniModel(Vue, 'users', '/mini-vue/www/');
var adminusers = new AdminUsers(Vue, usersmodel);
adminusers.reload(1);
</script>
try using this
var minifyCSS = require('gulp-minify-css'),
minifyJS = require('gulp-minify'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
gulp.task('minify-js', function() {
return gulp.src('./www/assets/js/**/*.js')
.pipe(minifyJS())
.pipe(concat('build.min.js'))
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest('./www/assets/js'));
});
gulp.task('minify-css', function() {
return gulp.src('./www/assets/css/**/*.css')
.pipe(minifyCSS())
.pipe(concat('build.min.css'))
.pipe(gulp.dest('./www/assets/css'));
});
gulp.task('default', ['minify-css', 'minify-js']);

gulp browsersync sass partials

I have the following problem and don't know whats going wrong with my gulpfile. Everything is working fine and my sass files are being compiled and the browser refreshed when changing something.
But if I add a new partial file and import it into my _base.scss, browsersync is only recognizing the change in that partial and is not compiling the whole sass file & reloading the browser. Does anyone know how to solve this problem? I could not figure out a good solution.
Thanks!
Here's my gulpfile.js
/*=============================================>>>>>
= gulpfile - all the gulptasks are here =
===============================================>>>>>*/
/*----------- variables -----------*/
// gulp
var gulp = require('gulp');
// css stuff
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var cssnext = require('postcss-cssnext');
var lost = require('lost');
var csswring = require('csswring');
// javascript
var babel = require('gulp-babel');
// jade
var jade = require('gulp-jade-php');
// browser sync
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
/*----------- tasks -----------*/
// style task
gulp.task('styles', function(){
var processors = [
autoprefixer,
cssnext,
lost,
csswring
];
return gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css/'))
.pipe(reload({stream: true}));
;
});
// javascript task
gulp.task('javascript', function(){
return gulp.src('./js/*.js')
.pipe(babel())
.pipe(gulp.dest('./js/dist/'))
.pipe(reload({stream: true}));
});
// jade task
gulp.task('jade', function(){
return gulp.src('./jade/*.jade')
.pipe(jade())
.pipe(gulp.dest('./templates/'))
.pipe(reload({stream: true}));
});
// browser sync
gulp.task('browserSync', function(){
var files = [
'./scss/**/*.scss',
'./css/style.css',
'./*.php',
'./templates/**/*.php',
'./js/*js',
'./jade/*jade'
];
browserSync.init(
files, {
proxy : 'localhost:8888/jobs/heisaplan/',
});
});
// watching the files for changes
gulp.task('watch', function(){
gulp.watch('./scss/**/*.scss', ['styles']).on('change', browserSync.reload);
gulp.watch('./js/*.js', ['javascript']).on('change', browserSync.reload);
gulp.watch('./jade/**/*.jade', ['jade']).on('change', browserSync.reload);
gulp.watch('./templates/**/*.php').on('change', browserSync.reload);
gulp.watch('./*.php').on('change', browserSync.reload);
});
// default gulp task
gulp.task('default', ['watch', 'browserSync', 'styles', 'javascript', 'jade']);

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'))
});