We Keep Coding

how to combine all yarn files with gulp

I have yarn up and running, have figured out a bit how it works, and made my inroads into figuring out gulp, after having discovered how to install version 4 instead of the default version that throws deprecation errors.
Now I have installed 3 packages with yarn, and it has downloaded a LOT of dependencies. No problem, one can use a gulp file to combine those into one javascript(or so i'm told)
The only thing is, how do I do that whilst maintaining the yarn dependencies as yarn builds those up? How would I format my gulp task for combining the yarn libaries i've added?
My gulp task currently looks like this:
//Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('assets/dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'));
});
And this concatenates my scripts as it should, but when I wanted to add the yarn folder it hit me that yarn manages dependencies and what not so everything has it's correct dependency and such. I doubt I can just add them all to the same file and hope all is well.(or can I?)
I run this task with yarn run watch
I've added the following packages: html5shiv, jquery, modernizr
What would be the correct way to add the yarn files in in assets/node_modules?

After long searching I found https://pawelgrzybek.com/using-webpack-with-gulpjs/
which gave me the following solution:
Execute the command:
sudo yarn add global gulp webpack webpack-stream babel-core babel-loader babel-preset-latest
create a webpack.config.js file
enter in it:
module.exports = {
output: {
filename: 'bundle.js', // or whatever you want the filename to be
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: [
['latest', { modules: false }],
],
},
},
],
},
};
Then create a gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
var webpackConfig = require('./webpack.config.js');
gulp.task('watch', watchTask);
gulp.task('default', defaultTask);
gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
.pipe(webpackStream(webpackConfig), webpack)
.pipe(gulp.dest('./assets/js')); // Or whereever you want your js file to end up.
});
function watchTask(done) {
// Wherever you stored your javascript files
gulp.watch('assets/javascript/*.js', gulp.parallel('scripts'))
done();
}
function defaultTask(done) {
// place code for your default task here
done();
}
Then in the directory execute yarn watch and have it run in the background where you can throw an eye on it now and then.

Task 'browser-sync' is not in your gulpfile

I just started to use browsersync. So I started learning about gulp.
I installed gulp using npm install gulp -g command. After this I initialized my project directory with package.json file by following command npm init. I then installed gulp in my project directory by npm install gulp --save-dev command.I also installed browsersync by npm install browser-sync --save-dev command.
Now I tried to run browsersync using gulp by gulp browser-sync command which gives me an error Task 'browser-sync' is not in your gulpfile
Below is my gulpfiles.js file
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// process JS files and return the stream.
gulp.task('js', function () {
return gulp.src('js/*js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
browserSync.reload();
done();
});
// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./"
}
});
// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
gulp.watch("js/*.js", ['js-watch']);
});
I had already tried including module.exports = gulp; line at beginning as well as at end of gulpfile.js but the error persist. My current gulp version is 3.9.1 on mac OSX 10.12.3
Please help I am stuck.

The problem is you called your task serve and not browserSync:
// use default task to launch Browsersync and watch JS files
// NOTE how this task is called serve:
gulp.task('serve', ['js'], function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./"
}
});
You could just change its' name:
// use default task to launch Browsersync and watch JS files
// NOTE at the name of the task now
gulp.task('browser-sync', ['js'], function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./"
}
});

Gulp-sourcemap, browserify and babelify

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.

Injecting content via Grunt task, depending on asp.net project build configuration

I'm trying to inject content via grunt-replace when I build by visual studio solution. However I would like to inject different content depending on the build configuration.
Is it possible to read the build configuration using grunt/node.
Thanks.

You can use grunt.option for this. Provide your build env on the command line and use it in the Gruntfile using grunt.option.
Quoting the example from grunt.option documentation
Gruntfile.js
grunt.initConfig({
compass: {
dev: {
options: {
/* ... */
outputStyle: 'expanded'
},
},
staging: {
options: {
/* ... */
outputStyle: 'compressed'
},
},
},
});
var target = grunt.option('target') || 'dev';
grunt.registerTask('deploy', ['compass:' + target]);
As you run grunt deploy your stylesheets would default to the dev target and output the CSS in the expanded format. If you ran grunt deploy --target=staging the staging target would instead be ran and your CSS would be in the compressed format.
grunt deploy --target=staging

Grunt-contrib-sass not working with compass

I'm new to Grunt, and am trying to configure grunt-contrib-sass to work alongside Compass.
I'm using the grunt-contrib-sass plugin, as I need to export my .scss files to two separate destinations and I couldn't get that to work with grunt-contrib-compass.
The problem that I'm having, is that on compile of .scss files I get 'ERROR: Cannot load compass' in the terminal.
Here's a copy of my gruntfile.js;
module.exports = function(grunt){
grunt.initConfig({
uglify: {
my_target: {
files: {
'wp-content/themes/mytheme/js/functions.js' : [ 'components/js/*.js' ]
}
}
}, // uglify
sass:{
dist:{
files: {
'wp-content/themes/mytheme/style.css' : 'components/sass/style.scss',
'wp-content/themes/mytheme/css/ie.css' : 'components/sass/ie.scss '
},
options: {
compass: true,
}
}
},
watch: {
scripts : {
files: ['components/js/*.js'],
tasks: ['uglify']
},
css: {
files: [ 'components/sass/*.scss'],
tasks: [ 'sass' ],
options: { livereload: true }
},
livereload: {
options: { livereload: true },
files: ['wp-content/themes/mytheme/'],
},
} // watch
})
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask( 'default', 'watch' );
} // exports
Thanks!

Grunt-contrib-sass doesn't support Compass versions less than v1.0.0 (which is in alpha at the time of writing).
After updating Compass with;
gem install compass --pre
everything appears to work fine on compilation. The same gruntfile.js was used as above.

Removing all versions of sass except of known working version 3.2.19 solved the problem for me.
$ sudo gem uninstall sass
Select gem to uninstall:
1. sass-3.2.3
2. sass-3.2.5
3. sass-3.2.19
4. sass-3.3.5
5. All versions
> 4

According to the grunt-contrib-compass github page you need to have Ruby, Sass and Compass installed as prerequisite. You are using grunt-contrib-sass instead of grunt-contrib-compass. See examples on the contrib-compass github.

I found another way to get compass to work without the ruby gem. (it is a bit of work though).
Go to https://github.com/Compass/compass and get the code.
Copy the contents of core/stylesheets/compass into your sass/scss folder. Now you can use the normal import-rules from the compass-website.
BUT:
You probably have to change some imports from compass like import "compass/support"; in _transitions.scss to import "../support";

grunt-contrib-sass perfectly works with compass, just add compass: true to options. I read this point on oficial git repository.
Example
sass: {
dist: {
options: {
style: 'expanded',
compass: true
},
files: [
{
expand: true,
cwd: 'ipa-framework/src/css/scss',
src: ['*.scss'],
dest: 'ipa-framework/src/css',
ext: '.css'
}
]
}
}

So none of the answers worked exactly for me but it did help me solve the issue.
When you install compass using
gem install compass --pre
it installs another version of sass, so dont install sass at all let the compass install do it for you.
So to get it to work
gem uninstall sass
gem install compass --pre
And for reference this is the npm libraries I needed to have to get this working
npm install -g grunt grunt-contrib-sass grunt-contrib-watch grunt-livereload sass grunt-contrib-cssmin grunt-contrib-compass