how to serve my assets (img, stuff) and my bower_components folder with gulp?
i have:
src/
assets/
vendor (bower_co..)/
gulp connect task
gulp.task('connect', function() {
connect.server({
root: ['src'],
livereload: true
});
});
gulp-connect readme says:
root: ['app', 'tmp'],
but when i pass multiple args they dont get served.
so what am i missing?..
Related
So, I have some landing pages files and previously my folder structure is
Old Folder Structure
landing-page
|-project1
|-css
|-js
|-scss
|-All .html files
|-project2
|-css
|-js
|-scss
|-All HTML files
|-gulpfile.js
|-package.json
gulpfile.js
For Project 1
gulp.task('watch:project1', gulp.series(function() {
browserSync.init({
server: {
baseDir: 'project1'
},
})
}));
For Project 2
gulp.task('watch:project2', gulp.series(function() {
browserSync.init({
server: {
baseDir: 'project2'
},
})
}));
New Folder Structure
landing-page
|-css
|-js
|-project1 ----> Contains HTML pages of project 1
|-project2 ----> Contains HTML pages of project 2
|-scss
|-gulpfile.js
|-package.json
Now, when I tried to run the Watch function it works but did not loading STYLE and JS files with error Cannot GET /
Updated gulpfile Position
landing-page
|-css
|-js
|-project1 ----> Contains HTML pages of project 1
|-project2 ----> Contains HTML pages of project 2
|-scss
|-gulpfile.js
|-package.json
gulpfile.js
gulp.task('watch:demo1', gulp.series(function() {
browserSync.init({
server: {
baseDir: '../landing-page/',
index: "../landing-page/project1/index.html"
}
})
}));
The watch code mentioned above only serve the index file.
So, I have updated my code
gulp.task('watch:demo1', gulp.series(function() {
browserSync.init({
server: {
baseDir: '../landing-page/',
index: "../landing-page/project1/index.html",
directory: true
}
})
}));
It serves all the files like mentioned below in the image.
But, the problem is it did not directly serve a specific project. I mean if I run watch:demo1 it should serve project1 and if I run watch:demo2 it should serve project2
A similar question has been asked a few times, but none of the answers are working for me. I'm trying to set up BrowserSync with a proxy of localhost:8888 for. My gulpfile is from the Foundation Framework ZURB template.
gulpfile.babel.js
import gulp from 'gulp';
import browser from 'browser-sync';
// Other Gulp functions
function server(done) {
browser.init({
proxy: 'localhost:8888'
}, done);
}
function reload(done) {
browser.reload();
done();
}
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('templates/**/*.html').on('all', gulp.series(browser.reload));
// Other gulp tasks
}
Running Gulp shows that BrowserSync is proxying:
[Browsersync] Proxying: http://localhost:8888
[Browsersync] Access URLs:
-----------------------------------
Local: http://localhost:3000
External: http://10.0.0.113:3000
-----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
I've tried http://localhost:8888 and 127.0.0.1:8888, doesn't help. My file structure:
gulpfile.babel.js
/src (asset source)
/web (dist location)
/templates (Craft CMS templates, all .html files)
Everything else in Gulp is running smoothly, I just can't get the proxy to reload or inject styles.
Now working with this update to the server function:
function server(done) {
browser.init({
port: '8890',
proxy: 'localhost:8888',
reloadOnRestart: true
}, done);
}
Go to localhost:8890 and viola!
I have not much experience with gulp and wonder what to do when deploying? How do I exclude certain tasks (like my 'sass' task for example) when deploying or how does gulp work for production - what would I do? I'm not sure if I use the wrong words or just don't understand it, but I couldn't find much online so far.
My gulp file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function() {
return gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function() {
return gulp.src('css/main.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify custom JS
gulp.task('minify-js', function() {
return gulp.src('js/scripts.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
// Copy vendor files from /node_modules into /vendor
// NOTE: requires `npm install` before running!
gulp.task('copy', function() {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js',
'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
})
// Default task
gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);
// Configure the browserSync task
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: ''
},
})
})
// Dev task with browserSync
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js'], function() {
gulp.watch('scss/*.scss', ['sass']);
gulp.watch('css/*.css', ['minify-css']);
gulp.watch('js/*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/**/*.js', browserSync.reload);
});
It depends entirely on your hosting solution and what deployment process you prefer to use. Some of your former questions have the Heroku tag so I assume you use Heroku. If not you can use the second strategy.
One method of using Gulp with Heroku is to automatically run Gulp when you push to the Heroku branch. This is done by having a postinstall script in package.json. Like so:
"scripts": {
..
"postinstall": "gulp"
}
When you push to the remote branch, Heroku will run the build process as normal. After the build process is done it will run the postinstall script. That will run the default task in the gulpfile. This will, of course, run on your Heroku dyno, not on localhost.
If you want to change the different sub tasks that are run during postinstall you can make a new task like this:
gulp.task('deployment', ['minify-css', 'minify-js', 'copy']);
and change the postinstall script to this:
"postinstall": "gulp deployment"
The deployment task will now run instead of the default task.
For this to work you need all the gulp packages in dependencies rather than devDependencies. devDependencies are, after all, not installed on Heroku.
The files that Gulp builds should be added to the .gitignore file. The files that Gulp outputs are often sent to a folder called dist which is kept out of the repository completely. You don't need to have them in the repository as they are being built on Heroku instead.
Another method is to build the files manually yourself before deployment. That means you don't have gulp in the postinstall script (or don't have the postinstall script at all) and keep the gulp packages in devDependencies. The files that are being built should also not be in .gitignore.
Before you deploy you build the files with gulp deployment and then commit them. When you push to Heroku the files will be uploaded like normal, instead of being built there.
This strategy is usually used when you have an ordinary web hosting service.
I have written an gulp script as :
gulp.task('scss', function(done) {
gulp.src('home/a.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(rename('chatbot.css'))
.pipe(gulp.dest('/var/www/html/css')) // restrcited path
.pipe(minifyCss({
keepSpecialComments: 0
}))
.on('end', done);
});
here /var/www/html/css is a directory created via sudo hence no files can be created inside it normally.
so how can i create this file using gulp.
You could use chown to change the ownership of the folder, so that it belongs to your user account again: https://askubuntu.com/questions/6723/change-folder-permissions-and-ownership
Or you could try sudo gulp scss, I guess.
I am trying to run karma test via a gulp task. I use https://github.com/karma-runner/gulp-karma and for some reason gulp cannot locate my karma.conf.js. That file is located in the same folder as the gulpfile. The root of the project. No matter what path I put, I get the same error File ./karma.conf.js does not exist. I cannot figure out how to path it correctly. Here is the code for the gulp task.
gulp.task('tdd', function (done) {
new Server({
configFile: 'karma.conf.js'
}, done).start();
});
This is how I spool up karma using Gulp ( and both files are in the same root ).
var karma = require('karma');
gulp.task('karma', function (done) {
karma.server.start({
configFile: __dirname + '/karma.conf.js'
}, done);
});
UPDATE
If you are running NODE.js then
NODE Explnation for __dirname link
"The name of the directory that the currently executing script resides in."
If you are not running NODE.js, then perhaps all you needed was
configFile: '/karma.conf.js'
But if you are running NODE then use the first example.
If another destination directory is assigned to __dirname, then it doesn't work.
Try this:
var Server = require('karma').Server
gulp.task('test', function (done) {
new Server({
configFile: require('path').resolve('karma.conf.js'),
singleRun: true
}, done).start();
});