This question already has an answer here:
What is wrong with this code that combines multiple js files to one?
(1 answer)
Closed 7 years ago.
I have never used gulp. I am trying out gulp-uglify example.
https://www.npmjs.com/package/gulp-uglify
var uglify = require('gulp-uglify');
gulp.task('compress', function() {
return gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
The example does not work. Where is gulp.task declared? What does the code inside gulp.task do? A file dist will be created after compressing all .js files in lib folder? How can the code example be modified to work properly?
Working configuration
Gulpfile:
"use strict";
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('scripts', function() {
gulp.src('./lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});
package.json (run npm install to verify that all dependencies correctly loaded):
{
"dependencies": {
"gulp": "~3.9.0",
"gulp-uglify": "~1.5.1"
}
}
Related
I have this node.js code that tries to minify and combine multiple js files to a single js file.
var concat = require('gulp-concat');
var gulp = require('gulp');
gulp.task('scripts', function() {
//gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
gulp.src(['./js/*.js'])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'))
});
All my js files are located in js folder. My node.js file is above the js folder. I am expecting the single minified file to appear in dist folder. I see nothing and get no error message when I run the code. What could have gone wrong?
Gulpfile.js:
"use strict";
var concat = require('gulp-concat');
var gulp = require('gulp');
var uglify = require('gulp-uglify'); // Add gulp-uglify module to your script
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});
Check package.json dependencies
Run npm install to verify that all dependencies correctly loaded. I think this was your issue:
{
"dependencies": {
"gulp-concat": "2.x",
"gulp": "3.x",
"gulp-uglify": "1.x"
}
}
I'm using gulp-sourcemaps in my project to process my SASS and JavaScript. My gulpfile.js is correctly generating .map files, though Chrome is showing the wrong filenames in Developer Tools and Console. At the moment, I'm unsure where the issue is.
My project tree:
gulpfile.js
public/
sass/
main.sass
import/
[.. more files and directories (all imported in main.sass) ..]
js/
main.js
test.js
min/
sourcemaps/
main.js.map
main.js
all.js
css/
main.css
sourcemaps/
main.css.map
My gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var plumber = require('gulp-plumber');
var prefix = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var options = {
styles: {
"source": "public/sass/main.sass",
"destination": "public/css",
"sourcemaps": "sourcemaps"
},
scripts: {
"source": "public/js/*.js",
"destination": "public/js/min",
"sourcemaps": "sourcemaps"
}
}
gulp.task('styles', function() {
return sass(options.styles.source, {sourcemap: true, style: 'compressed'})
.pipe(plumber())
.pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
.pipe(sourcemaps.write(options.styles.sourcemaps))
.pipe(gulp.dest(options.styles.destination));
});
gulp.task('scripts', function() {
return gulp.src(options.scripts.source)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('all.js'))
.pipe(gulp.dest(options.scripts.destination))
.pipe(rename('main.js'))
.pipe(uglify())
.pipe(sourcemaps.write(options.scripts.sourcemaps, {includeContent: false, sourceRoot: '../../'}))
.pipe(gulp.dest(options.scripts.destination));
});
gulp.task('default', ['styles', 'scripts'], function() {
gulp.watch('public/sass/**', ['styles']);
gulp.watch('public/js/**', ['scripts']);
});
The plan is:
'styles' compiles public/sass/main.sass (which includes all of my
SASS source), auto-prefixes the source, writes a sourcemap and
outputs public/css/main.css
'scripts' concatenates all files in the public/js directory, uglifies
the source, writes a sourcemap and outputs public/js/min/main.js
After this entire process, I want to be left with public/css/main.css containing all my compiled, auto-prefixed, minified SASS source and public/js/min/main.js containing all my concatenated, minified, JavaScript source.
At the moment, styles in developer tools show the filename _box-sizing.scss (which is a dependency from public/sass/import/lib/neat), a file that contains no styles for the element I am inspecting. The filename should be _header.sass (from public/sass/import/layouts/common/_header.sass).
Similarly, the console shows main.js no matter the source file. I have public/js/main.js and public/js/test.js - these files should be concatenated and output to public/js/min/main.js. Both these files only contain a single console.log() for testing purposes and the filename displayed in Chrome is main.js for both.
I hope this makes sense. Thank you in advance
I've encountered the same problem without finding a solution. Maybe I'm wrong but it seems that gulp-Sourcemap has one or more issues to resolve.
https://github.com/floridoo/gulp-sourcemaps/issues/94#issuecomment-165164311
I made resolution after comment out the css beautify code in gulpfile.js
//.pipe(cssbeautify()) OR
//.pipe(uglify())
I am relatively new to gulp and browserify. For my understanding, if you could please explain how I could use browserify with my current gulp file...
As I'm using 'require' for my gulp modules, would I get any benefit using browserify? If so, how would it benefit me?
var sass = require('gulp-sass'),
concat = require('gulp-concat'),
watch = require('gulp-watch'),
gulp = require('gulp'),
minifyCSS = require('gulp-minify-css'),
rename = require('gulp-rename'), // to rename any file
destination = 'public/css';
// task to compile sass, minify then rename file
gulp.task('sass', function () {
gulp.src('public/sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest(destination))
.pipe(concat('style.css'))
.pipe(gulp.dest(destination))
.pipe(minifyCSS())
.pipe(rename('style.min.css'))
.pipe(gulp.dest(destination));
});
// save typing gulp sass, and use just gulp instead
gulp.task('default', ['sass']);
// simple watch task
gulp.task('watch', function () {
gulp.watch('public/sass/**/*.scss', ['sass']);
});
What do you think browserify does?
At the moment, I don't see any need to include it as you are not processing/bundling any scripts.
I installed it correctly I think.
My package.json
{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"gulp": "^3.8.11",
"gulp-concat": "^2.5.2"
}
}
my gulp.js
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('build/js'));
});
gulp.task('default', ['scripts']);
my folder are as follow :
ROOT/package.json
ROOT/gulp.js
ROOT/node-modules/ <-- my modules are here
ROOT/js/ <-- my js are here
When I run gulp in command line, being in the ROOT folder, gulp.js just opens in windows notepad and that's all..
Why is it doing that?
problem solved by a simple action: renaming gulp.js to gulpfile.js (sigh..)
Two steps:
Step-1) renaming gulp.js to gulpfile.js as exposed in answer above; Step-2) using npm install -g gulp-cli
I am trying to get gulp to compile my sass and use the susy grid/framework.
I'm having troubles finding any information about this online.
I have included:
"gulp-ruby-sass": "^0.7.1",
into my package.json and installed everything.
My gulp sass gulp task likes like so:
gulp.task('sass', ['images'], function () {
return gulp.src('src/sass/*.{sass, scss}')
.pipe(sass({
bundleExec: true,
sourcemap: true,
sourcemapPath: '../sass'
}))
.on('error', handleErrors)
.pipe(gulp.dest('build'));
});
So I can't for the life of me work out how to include susy so it complies using gulp, I haven't looked and can't seem to find anything relating to this online.
You can use gulp-compass, you only need to have compass installed in your system and install gulp-compass package through npm, here is a sample code:
var compass = require('gulp-compass');
gulp.task('compass', function() {
return gulp.src('./src/*.scss')
.pipe(compass({
// Gulp-compass options and paths
css: 'app/assets/css',
sass: 'app/assets/sass',
require: ['susy']
}))
.on('error', handleErrors)
.pipe(gulp.dest('app/assets/temp'));
});
More info about this package here
To have more details from Jamie's answer, here is what you can do to use susy without compass..
download .zip package of susy from github. extract package into
node_modules directory.
In my case I put it in susy-master folder.
In gulpfile.js, you could have some thing like this to include susy package. Note that the important is to put correct includePath value to be the same path of the susy-master folder..
gulp.task('sass', function(){
gulp.src('public/sass/styles.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['node_modules/susy-master/sass']
}).on('error', sass.logError))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('public/css'))
});
Import susy in styles.scss
#import "susy";