Im new to using Gulp. I'm trying to concatenate my JavaScript files into a single file. Currently, I have the following:
gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var input = {
js: './src/**/*.js'
};
var output = {
js: './dist/myJavaScript.min.js'
}
gulp.task('default', ['clean', 'bundle-js']);
gulp.task('clean', function(callback) {
});
gulp.task('bundle-js', function() {
gulp.src(input.js)
.pipe(concat(output.js))
.pipe(uglify())
;
});
When I run this, myJavaScript.min.js never gets generated. I ran gulp --verbose and I do not see any files being input. However, my directory structure looks like this:
/
/src
/childDirectory
file2.js
file1.js
gulpfile.js
package.json
Based on my understanding, the expression I used for input.js should get file1.js and file2.js. What am I doing wrong?
You should give
file name inside concat function, you should not give it as a path name
add return before including source.
add destination
try the following code,
gulp.task('bundle-js', function() {
return gulp.src(input.js)
.pipe(concat('myJavaScript.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});
You are missing your destination folder.
gulp-concat-link
.pipe(gulp.dest('folderPathHere'));
Related
I'm using gulp-terser to minify js files. I have a jquery file and a custom js file. When I try to run the task, the custom js code is at the beginning of the jquery file. I've tried using gulp-order with it, but still no luck.
Here's the code i'm using:
gulp.task('build-js', function () {
return gulp.src(["src/js/jquery.min.js","src/js/zinv.js"])
.pipe(concat('inv.min.js'))
.pipe(terser())
.pipe(gulp.dest('./js'));
});
thanks in advance.
I think you need to switch the position of .pipe(terser()) and .pipe(concat('inv.min.js')) and call the require().
Try this :
var gulp = require('gulp');
var terser = require('gulp-terser');
var concat = require('gulp-concat');
gulp.task('js', function () {
return gulp.src(["src/js/jquery.min.js","src/js/zinv.js"])
.pipe(terser())
.pipe(concat('inv.min.js'))
.pipe(gulp.dest('js'));
});
gulp.task('default', gulp.series('js'));
And then on your terminal, navigate to the directory where your gulpfile.js is saved and type gulp or gulp js
Got this to work by moving tersor up a step:
gulp.task('build-js', function () {
return gulp.src(["src/js/jquery.min.js","src/js/zinv.js"])
.pipe(terser())
.pipe(concat('inv.min.js'))
.pipe(gulp.dest('./js'));
})
So far I have this code, which I got from here:
var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
gulp.task('default', function() {
return gulp.src('*/lib/app.js', { base: '.' })
.pipe(named())
.pipe(webpack())
.pipe(gulp.dest('.'));
});
My folder structure is like:
site1/lib/app.js
site2/lib/app.js
I want to create the output files like the following, with each file containing only their respective lib/app.js file's code (and any require()s made in them):
site1/app.js
site2/app.js
However, the code I have now just outputs to the project's root directory. I've tried several combinations, such as removing the { base: '.' }, but nothing works. If I remove the named() and webpack() pipes, though, then the current code actually outputs to the correct directory. So, in the process, it seems like perhaps Webpack loses the originating directory information?
Also, it possible to get a solution that also works with Webpack's "watch: true" option, so that compiling modified files is quick, rather than using Gulp to always iterate through every single file on every file change?
I assume you want to create a app.js for each site that packs only the code for that site (and not the others).
In that case you can use gulp-foreach to effectively iterate over all your app.js files and send each one down its own stream. Then you can use the node.js built-in path module to figure out where the parent directory for each app.js file is and write it there with gulp.dest().
var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var foreach = require('gulp-foreach');
var path = require('path');
gulp.task('default', function() {
return gulp.src('*/lib/app.js')
.pipe(foreach(function(stream, file) {
var parentDir = path.dirname(path.dirname(file.path));
return stream
.pipe(named())
.pipe(webpack())
.pipe(gulp.dest(parentDir));
}));
});
If you want to use webpack({watch:true}) you'll have to use a different approach. The following uses glob to iterate over all the app.js files. Each app.js file is again send down its own stream, however this time all the streams are merged before being returned.
var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var path = require('path');
var merge = require('merge-stream');
var glob = require('glob');
gulp.task('default', function() {
return merge.apply(null, glob.sync('*/lib/app.js').map(function(file) {
var parentDir = path.dirname(path.dirname(file));
return gulp.src(file)
.pipe(named())
.pipe(webpack({watch:true}))
.pipe(gulp.dest(parentDir));
}));
});
i am currently learning about gulp.js.
as i saw the tutorial and documentation of gulp.js, this code:
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
makes the uglified javascript file with create new directory named 'minjs'. of course, i installed gulp-uglity with --dev-save option. there is no error message on the console so i don't know what is the problem. i tried gulp with "sudo", but still not working.
so i went to the root directory and searched all filesystem but there is no file named 'minjs' so i guess it just not working. why this is happening? anyone knows this problem, it would be nice why this is happening.
whole source code:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('default', function() {
console.log('mifying scripts...');
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('minjs'));
});
I had the same problem; you have to return the task inside the function:
gulp.task('default', function() {
return gulp.src("js/*.js")
.pipe(uglify())
.pipe(gulp.dest('minjs'));
Also, minjs will not be a file, but a folder, where all your minified files are going to be saved.
Finally, if you want to minify only 1 file, you can specify it directly, the same with the location of the destination.
For example:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
gulp.task('browserify', function() {
return browserify('./src/client/app.js')
.bundle()
// Pass desired output filename to vinyl-source-stream
.pipe(source('main.js'))
// Start piping stream to tasks!
.pipe(gulp.dest('./public/'));
});
gulp.task('build', ['browserify'], function() {
return gulp.src("./public/main.js")
.pipe(uglify())
.pipe(gulp.dest('./public/'));
});
Hope it helps!
Finally I resolved the question like this:
It was a directory mistake so the gulp task hasn't matched any files; then it couldn't create the dest directory (because no files in output).
const paths = {
dest: {
lib: './lib',
esm: './esm',
dist: './dist',
},
styles: 'src/components/**/*.less',
scripts: ['src/components/**/*.{ts,tsx}', '!src/components/**/demo/*.{ts,tsx}'],
};
At first my scripts was ['components/**/*.{ts,tsx}', '!components/**/demo/*.{ts,tsx}']
And that hasn't matched any files.
I'm using Gulp to dome some tasks on my SCSS and CSS. Now the problem is that when I run Gulp it's starting the watch but nothing is happening: no css is being created. I triple checked the folder structure and it's can.
This is my code:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
gulp.task('sass', function () {
return gulp.src('resources/assets/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer({browsers: ['last 2 version']}))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./public/css'))
});
gulp.task('default', function () {
watch('resources/assets/sass/**/*.scss', function () {
gulp.start('sass');
});
});
Temporary Solution
After a long search with some people it's just PHPStorm that's not showing the updated file. The file has to be accessed first. It's like a sort of caching.
When I save the .scss file, and immediatly open it with notepad, or access a php file which uses the file, then it also updates in PHPStorm.
Try this one
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
gulp.task('sass', function () {
return gulp.src('resources/assets/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer({browsers: ['last 2 version']}))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./public/css'))
});
gulp.task('default', function () {
gulp.watch('resources/assets/sass/**/*.scss', ['sass']);
});
I don't think you really need another plugin to complie your sass files, gulp.watch works just fine.
So basically what I am doing here is, I am just telling gulp to watch all the sass files in that folder and whenever there's a change, just run the task in the given array ['sass'].
The solution is a PHPStorm Setting
It seems that PHPStorm uses a form of file caching, that's why I didn't see the reflected changes. The solution can be found here!
How to prevent phpstorm to reload file without prompt when file on disk is changed?
I'm a Gulp JS beginner. Currently I'm trying to compile some simple less code to CSS. My Gulp task should output a new CSS file for this but after I run the task, nothing happens. I've included the gulp-util module to try to debug the task execution but it doesn't show me any errors.
Here's my Gulp file:
// gulpfile.js
// --- INIT
var gulp = require('gulp'),
util = require('gulp-util'),
less = require('gulp-less'), // compiles less to CSS
minify = require('gulp-minify-css'), // minifies CSS
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'); // minifies JS
// Paths variables
var paths = {
'dev': {
'less': './laravel/public/assets/less/'
},
'assets': {
'css': './laravel/public/assets/css/ ',
'js': './laravel/public/assets/js/',
'vendor': './laravel/public/assets/bower_vendor/'
}
};
// --- TASKS
// Auth CSS
gulp.task('auth.css', function(){
return gulp.src(paths.dev.less + 'auth.less')
.pipe(less().on('error', util.log))
.pipe(gulp.dest(paths.assets.css))
.pipe(minify({keepSpecialComments:0}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.assets.css));
});
// --- WATCH
// --- DEFAULT
gulp.task('default', ['auth.css']);
I'm using Laravel 4. This file lives in the root directory. I have changed the paths but that doesn't seem to work either. Any ideas?
Try removing the extra space at the end of your path.assets.css.
Just fixed. It seems, the path had to be something like: "./public/assets/css/". Now the file has been generated.