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']);
Related
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?
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');
I use Gulp 4 and get following error in the console ( I tried to upgrade the gulpfile code to gulp 4, but it's still not working):
$ gulp
[13:30:25] Using gulpfile c:\Users\Sylwia Szymańska\Projects\New project\gulpfil
e.js
[13:30:25] Starting 'default'...
[13:30:25] 'default' errored after 2.95 ms
[13:30:25] AssertionError: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\user\Projects\New project\no
de_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\user\Projects\New project\node_modules\un
dertaker\lib\task.js:13:8)
at C:\Users\user\Projects\New project\node_modules\gulp-series\l
ib\gulp-series.js:27:11
at Array.forEach (native)
at C:\Users\user\Projects\New project\node_modules\gulp-series\l
ib\gulp-series.js:23:11
at taskWrapper (C:\Users\user\Projects\New project\node_modules\
undertaker\lib\set-task.js:13:15)
at bound (domain.js:280:14)
at runBound (domain.js:293:12)
at asyncRunner (C:\Users\user\Projects\New project\node_modules\
async-done\index.js:36:18)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
My gulpfile:
var gulp = require('gulp');
var build = require('gulp-build');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var browser_sync = require('browser-sync');
var gulps = require("gulp-series");
var watch = require('gulp-watch');
var less = require('gulp-less');
var livereload = require('gulp-livereload');
gulp.task('stream', function () {
// Endless stream mode
return watch('css/**/*.css', { ignoreInitial: false })
.pipe(gulp.dest('build'));
});
gulp.task('callback', function () {
// Callback mode, useful if any plugin in the pipeline depends on the `end`/`flush` event
return watch('css/**/*.css', function () {
gulp.src('css/**/*.css')
.pipe(gulp.dest('build'));
});
});
gulp.task('build', function() {
gulp.src('scripts/*.js')
.pipe(build({ GA_ID: '123456' }))
.pipe(gulp.dest('dist'))
});
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
//sourcemaps???
var gulp = require('gulp');
// var plugin1 = require('gulp-plugin1');
// var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('javascript', function() {
gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
// .pipe(plugin1())
// .pipe(plugin2())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
// var less = require('gulp-less'),
// livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('less/*.less', ['less']);
});
var gulps = require("gulp-series");
gulps.registerTasks({
"test1" : (function(done) {
setTimeout(function() {
console.log("test1 is done");
done();
}, 1000);
}),
"test2" : (function() {
console.log("test2 is done");
})
});
gulps.registerSeries("default", ["test1", "test2"]);
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
I'll be gratefull for help!
I installed all the packages (I hope, so).
In Gulp 4.0 the gulp.watch task does not accept array arguments like ['sass'] anymore.
You can use gulp.series or gulp.parallel to define the tasks to be executed when gulp.watch triggers a change event.
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});
The Complete-Ish Guide to Upgrading to Gulp 4 may be useful.
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']);
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));
});