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())
Related
Here is my project structure:
cloudRun
distApp // TRANSPILED APP FILES FROM ./src
distService // TRANSPILED BACKEND FILES FROM ./cloudRun/src
src // SOURCE FILES FOR THE BACKEND CODE
index.js // INDEX.JS FOR THE BACKEND CODE
babel.config.js // CONFIG FOR THE BABEL TRANSPILE SCRIPT
src // SOURCE FILES FOR THE APP
index.js // INDEX.JS FOR THE APP CODE
package.json // THIS IS THE MAIN PROJECT package.json
I'll try to be very succinct and clear.
In both of the index.js (app and backend code) I use path aliases in the source code.
For example:
./src/some-folder/some-file.js
import xxx from "#src/hooks/someHoot";
// IN THE TRANSPILED VERSION #src MUST BE CONVERTED TO ./cloudRun/distApp
And also, for example:
./cloudRun/src/some-folder/some-file.js
import xxx from "#src/hooks/someHoot";
// IN THE TRANSPILED VERSION #src MUST BE CONVERTED TO ./cloudRun/distApp
But somehow I'm having trouble when configuring module-resolver on babel.config.js. Either I get it to work correctly with the path aliases present on ./src (and path aliases on ./cloudRun/src are all wrong by 1 level) or vice-versa.
For example:
.cloudRun/babel.config.js
plugins = [
["module-resolver", {
"alias": {
"#src" : "./distApp",
"#hooks" : "./distApp/hooks",
}
}]
];
This works for the ./src files. But files from ./cloudRun/src are all wrong by 1 level up.
And if I change to this:
.cloudRun/babel.config.js
plugins = [
["module-resolver", {
"alias": {
"#src" : "./cloudRun/distApp",
"#hooks" : "./cloudRun/distApp/hooks",
}
}]
];
Then it works fine for the ./cloudRun/src files. But all files from ./src will be wrong by 1 level down.
I was thinking that I might fix this with the "root" option in the module-resolver config. But I couldn't make it work yet.
Maybe something like this:
.cloudRun/babel.config.js
plugins = [
["module-resolver", {
"root": ["./cloudRun"], // SET A NEW ROOT HERE
"alias": {
"#src" : "./distApp",
"#hooks" : "./distApp/hooks",
}
}]
];
I've tried many things inside the "root" config. But so far it doesn't seem to make any difference.
Here is how I run babel:
// SCRIPTS FROM ./package.json
babel src --out-dir cloudRun/distApp --config-file ./cloudRun/babel.config.js
babel cloudRun/src --out-dir cloudRun/distService --config-file ./cloudRun/babel.config.js
I am using gulp on a .net project and for some reason the script isnt generating the css file.
Here is my folder structure for the root folder and assets folder:
Here is my gulp script:
require('es6-promise').polyfill();
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
return gulp.src('./wwwroot/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('./wwwroot/css/'))
});
gulp.task('default', ['sass']);
The script runs fine with no errors, but the css file is not created. Any ideas why this could be?
I have a static site that uses two gulpfiles to compile. One is gulpfile.dev.js which compiles all the files correctly and uses a static server served by browsersync. The gulpfile.prod.js is the the exact same as the dev file, just without browsersync server. When I compile my file using DeployHQ to move files on my server it doesn't compile the necessary css folder.
My gulpfile.prod.js file:
//DH
var gulp = require('gulp'), //Task runner
uglify = require('gulp-uglify'), //Minimizies JS
sass = require('gulp-ruby-sass'), //Compiles to CSS
imagemin = require('gulp-imagemin'), // Minimize images
concat = require('gulp-concat'),
concatCss = require('gulp-concat-css'),
gutil = require('gulp-util'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
pug = require('gulp-pug'),
htmlmin = require('gulp-htmlmin');
// Define paths for sources and destination.
var paths = {
src: {
js: './src/js/*.js',
sass: './src/sass/**/*.sass',
html: './views/*.pug'
},
dest: {
js: './app/build/js',
css: './app/build/css',
html: './app'
}
};
var autoprefixerOptions = {
browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};
//Error look-outs in gulp
function errorLog(error){
console.error.bind(error);
this.emit('end');
}
// Scripts
gulp.task('scripts', function(){
gulp.src(paths.src.js)
.pipe(uglify())
.on('error', errorLog)
.pipe(concat('main.js'))
.pipe(gulp.dest(paths.dest.js))
});
// PUG -> HTML
gulp.task('pug', function buildHTML() {
return gulp.src(paths.src.html)
.pipe(pug())
.pipe(gulp.dest(paths.dest.html))
.pipe(htmlmin({collapseWhitespace: true}));
});
// Styles
gulp.task('styles', function(){
return sass(paths.src.sass)
.on('error', errorLog)
.pipe(autoprefixer(autoprefixerOptions))
.pipe(cssnano())
.pipe(gulp.dest(paths.dest.css))
});
//Run task
gulp.task('default', [
'scripts',
'pug',
'styles']);
These are the bash commands DeployHQ executes to serve the files correctly in the right directory. Most of it is just removing files that I don't need to be on the server. I build the files needed to be served from app/ then move the files to the root html directory. nam run prod translates to gulp default --gulpfile gulpfile.prod.js
cd /var/www/site.com/html
npm install
npm run prod
rm -rf node_modules/ src/ views/
cd app
cp -a build/ /var/www/site.com/html
cp index.html /var/www/site.com/html
cd ..
rm -rf app/
rm .gitlab-ci.yml gulpfile.dev.js gulpfile.prod.js package.json .gitignore README.md
Edit:
Running the prod file locally compiles everything as its supposed to, but on the server it does not. It does not compile the css folder.
Edit 2:
I've changed my styles task to reflect gulp-ruby-sass's documentation to this:
gulp.task('styles', function(){
sass(paths.src.sass)
.on('error', errorLog)
.pipe(autoprefixer(autoprefixerOptions))
.pipe(cssnano())
.pipe(gulp.dest(paths.dest.css))
});
The CSS folder still does not compile.
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 have just developed a simple MEAN.JS application. MEAN.JS provides a command grunt build that helps me to minify the js and css files located at the following folders
css: [
'public/modules/**/css/*.css'
],
js: [
'public/config.js',
'public/application.js',
'public/modules/*/*.js',
'public/modules/*/*[!tests]*/*.js'
]
but how about also minifies the third-party libraries, which is installed with bower and located in public/lib/...? All the needed js and css file paths are already inside the MEAN.JS environment config file.
Meanwhile, the minified js file application.min.js is really just "minified", not "uglified", the variables' names are still the same as the original and very long.
In short, has MEAN.JS already provided any ways or functions that can "uglified" all the js and css files including third-party libraries?
EDIT:
To avoid errors when uglifying 3rd party files, only include non-minified 3rd party .js files in your config/env/all.js file.
Currently, your grunt build task uglifies your application javascript files but not your 3rd party javascript files. It does this via the uglify task in your grunt.js file.
uglify: {
production: {
options: {
mangle: false
},
files: {
'public/dist/application.min.js': 'public/dist/application.js'
}
}
},
If you want to uglify your 3rd party files I suggest taking the following steps:
Add your vendor files to your grunt.js file and the uglify task:
Change the configuration object (around line 170) to include your vendor files:
// A Task for loading the configuration object
grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
var init = require('./config/init')();
var config = require('./config/config');
// insert vendor files
grunt.config.set("vendorJavaScriptFiles", config.assets.lib.js);
// note: you can do the same for your css files
grunt.config.set("vendorCSSFiles", config.assets.lib.css);
grunt.config.set('applicationJavaScriptFiles', config.assets.js);
grunt.config.set('applicationCSSFiles', config.assets.css);
});
Add your vendorJavaScriptFiles to your uglify task:
uglify: {
production: {
options: {
mangle: false
},
files: {
'public/dist/application.min.js': 'public/dist/application.js',
'public/dist/vendor.min.js': '<%= vendorJavaScriptFiles %>'
}
}
}
Change your config/env/production.js file to reflect your new vendor.min file:
assets: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.min.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.min.css',
// note you can follow a similar process for your css files
],
js: 'public/dist/vendor.min.js'
},
css: 'public/dist/application.min.css',
js: 'public/dist/application.min.js'
}
Now, when you run grunt build you should get both an applicaiton.min.js file and a vendor.min.js file in your public/dist/ folder.
I separated them out for clarity, but you could combine them into one application.min.js file if you prefer.
Here is a much more detailed description of the process: https://blog.dylants.com/2014/11/19/bundling-production-assets-for-mean-js/
Hope this helps.