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.
Related
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 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: "./"
}
});
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.
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"
}
}
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"
}
}