I'm writing a react app using gulp to build and babelify to transpile.
I use the following definition of browserify task :
gulp.task('browserify', function() {
var entries = glob.sync('./app/**/*.js*');
var bundler = browserify({entries: entries, debug: true})
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.on('error', function(err) {
console.error(err);
})
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});
I get one bundle.js while I expect to see transpiled js files in dist with the same folder structure as src (here app).
Am I expecting a right thing ? If yes, how can I make it to work like what I expect.
you should remove
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
which are useless while you are using debug: true on browserify.
the debug: true option writes directly the sourcemaps on bundle.js with base64 encoding. So on your browser, you get source files separatly.
Related
I'm using gulp for concat my plugins (bootstrap, jquery, etc) in one big file, this is my code:
const gulp = require('gulp');
const csso = require('gulp-csso');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('build', function() {
gulp.src(["./bower_components/bootstrap/dist/css/bootstrap.min.css",
"./bower_components/ekko-lightbox/dist/ekko-lightbox.css",
"./bower_components/owl.carousel/dist/assets/owl.carousel.min.css",
"./bower_components/owl.carousel/dist/assets/owl.theme.default.css",
"./client/css/core.css",
"./client/css/responsive.css"])
.pipe(csso())
.pipe(concat("main.css"))
.pipe(gulp.dest("./build"));
gulp.src(["./bower_components/jquery/dist/jquery.js",
"./bower_components/bootstrap/dist/js/bootstrap.bundle.js",
"./bower_components/ekko-lightbox/dist/ekko-lightbox.min.js",
"./bower_components/lazysizes/lazysizes.min.js",
"./bower_components/owl.carousel/dist/owl.carousel.min.js",
"./bower_components/moment/min/moment.min.js",
"./bower_components/moment/min/locales.min.js",
"./client/js/script.js" ])
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(concat("main.js"))
.pipe(gulp.dest('./build'));
});
And it's doing OK. But when i'm including this script on my project, console throws my error: Uncaught TypeError: Cannot set property 'bootstrap' of undefined.
I tried just concat it without es2015 or uglify, but this error (or another, like moment is not defined) still persists. What am i doing wrong?
Ok, i got it.
npm install --save-dev babel-plugin-proposal-object-rest-spread
npm install --save-dev babel-plugin-transform-object-rest-spread
Then pipe
.pipe(babel({
presets: [['env', {
loose: true,
modules: false,
exclude: ['transform-es2015-typeof-symbol']
}]],
plugins: ['transform-es2015-modules-strip', 'transform-object-rest-spread']
}))
And it works
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'm having trouble transpiling node modules written with es6 syntax. I am writing js using es6 myself and my files get transpiled correctly, but modules from node_modules folder don't. They get imported correctly though. I am using gulp with this setup
gulp.task('scripts', function () {
var bundler = browserify({
entries: paths.src + 'scripts/main.js',
presets: ["es2015"],
extensions: ['.js'],
debug: true
});
bundler.transform(babelify);
bundler.bundle()
.on('error', function (err) { console.log(err); })
.pipe(source('main.js'))
.pipe(buffer())
.pipe(gulp.dest(paths.dest + 'scripts'))
.pipe(browserSync.stream());
});
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 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";