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.

Gulp not creating CSS folder on production build

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.

Run a npm script from gulp task

How to run a npm script command from inside a gulp task?
package.json
"scripts":
{
"tsc": "tsc -w"
}
gulpfile.js
gulp.task('compile:app', function(){
return gulp.src('src/**/*.ts')
.pipe(/*npm run tsc*/)
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());
});
I want to do this because running npm run tsc does not give me any error but if I use gulp-typescript to compile .ts then I get bunch of errors.

You can get the equivalent using gulp-typescript
var gulp = require('gulp');
var ts = require('gulp-typescript');
gulp.task('default', function () {
var tsProject = ts.createProject('tsconfig.json');
var result = tsProject.src().pipe(ts(tsProject));
return result.js.pipe(gulp.dest('release'));
});
gulp.task('watch', ['default'], function() {
gulp.watch('src/*.ts', ['default']);
});
Then on your package.json
"scripts": {
"gulp": "gulp",
"gulp-watch": "gulp watch"
}
Then run
npm run gulp-watch
Alternatively using shell
var gulp = require('gulp');
var shell = require('gulp-shell');
gulp.task('default', function () {
return gulp.src('src/**/*.ts')
.pipe(shell('npm run tsc'))
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());
});
gulp-shell has been blacklisted you can see why here
Another alternative would be setting up webpack.

Wasted about 1 hour on this simple thing, looking for a ~complete answer, so adding another here:
If you question is only on typescript (tsc), see https://stackoverflow.com/a/36633318/984471
Else, see below for a generic answer.
The question title is generic, so a generic example is given below first, then the answer.
Generic example:
Install nodejs, if you haven't, preferably LTS version, from here: https://nodejs.org/
Install below:
npm install --save-dev gulp gulp-run
File package.json has below contents (other contents can be there):
{
"name": "myproject",
"scripts": {
"cmd1": "echo \"yay! cmd1 command is run.\" && exit 1",
}
}
Create a file gulpfile.js with below contents:
var gulp = require('gulp');
var run = require('gulp-run');
gulp.task('mywatchtask1', function () {
// watch for javascript file (*.js) changes, in current directory (./)
gulp.watch('./*.js', function () {
// run an npm command called `test`, when above js file changes
return run('npm run cmd1').exec();
// uncomment below, and comment above, if you have problems
// return run('echo Hello World').exec();
});
});
Run the task mywatchtask1 using gulp?
gulp mywatchtask1
Now, gulp is its watching for js file changes in the current directory
if any changes happen then the npm command cmd1 is run, it will print yay! cmd1 command is run. everytime the one of the js file changes.
For this question: as another example:
a) package.json will have
"tsc": "tsc -w",
instead of the below:
"cmd1": "echo \"yay! cmd1 command is run.\" && exit 1",
b) and, gulpfile.js will have:
return run('npm run tsc').exec();
instead of below:
return run('npm run cmd1').exec();
Hope that helps.

You can try to implement it using childprecess node package or
use https://www.npmjs.com/package/gulp-run
var run = require('gulp-run');
gulp.task('compile:app', function(){
return gulp.src(['src/**/*.js','src/**/*.map'])
.pipe(run('npm run tsc'))
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());
});

How can I apply browserify to my gulp file?

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.

Compiling SASS and SUSY with GULP

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";