I have the following code, but it can't read files from src folder. Does anyone know the path where gulp read file from?
gulp.task('default', function() {
return gulp.src(__dirname + './src/*')
.pipe() ...//other code
});
Folder structure:
--app
--gulp
--gulpfile.js
--src
--(files-to-be-read, for example: 1.png)
The __dirname global returns the current directory and will not include aditional slash at the end, so concatenating './otherDir' will become '/dir./otherDir'.
Just remove the dot from the string to concatenate.
https://nodejs.org/docs/latest/api/globals.html
I would think - because I am not a Node.js expert - that Gulp uses the current working directory.
The directory which contains the package.json and the Gulp script.
So, when invoking Gulp in the app/gulp directory, you can get away with this:
gulp.task('default', function() {
return gulp.src('src/*')
.pipe() ...//other code
});
You can also use relative paths from that dir, like this:
gulp.task('other', function() {
return gulp.src('../../whatever/*')
.pipe() ...//other code
});
Related
Following code, tried with both ./ as src and dest. Gave security administration full rights to folders, just in case if there was any issue.
So whenever I change styles.css from the styles folder, the code runs good on gulp watch and detects change too. It does run styles command on file change too. But then no folders are created in my dest folder.
var gulp = require('gulp');
gulp.task('styles' , function() {
return gulp.src('/app/assets/styles/styles.css')
.pipe(gulp.dest('/app/styles.css'));
});
gulp.task('watch',function(){
gulp.watch('./app/assets/styles/styles.css',
function() {
gulp.start('styles');
});
});
gulp.dest() takes a folder only, not a file. It probably is creating a folder, it is just called styles.css! Look under that for your file styles.css.
You probably want gulp.dest('./app'). the file name will be retained automatically.
I would also simplify to the below. gulp.start is not really documented.
gulp.task('watch',function(){
gulp.watch('./app/assets/styles/styles.css', ['styles']);
});
gulp.task('styles' , function() {
// added the . before /app here and in dest
return gulp.src('./app/assets/styles/styles.css')
.pipe(gulp.dest('./app'));
});
I need some help.
I'm looking for a way to generate (or update if the file already exists) a .css file that is a conversion by an .scss file. All of this when compiling.
Explaining this in a better way :
I'm writing some code, everything is ok and I decide to save. Perfect. ctrl+s and the app run perfectly. Nice. Now I've added a style.scss file somewhere (it doesn't really matter the path). How do I "tell" to the compiler that everytime he compile he also has to 'take' this .scss file, convert it in a .css file, and put it in a specific path?
Well, I found a way to do what I needed to do.
I've created my gulpfile.js in this way :
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
gulp.task('styles', function () {
gulp.src('src/app/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['styles']);
});
And added this command to package.json :
"try": "gulp watch && ng s"
the problem is that if in the cli I run the command npm run try it will never start my application, because the watch is an endless stream.
How can I have the watch and the app running both at the same time?
*Edit
Found the solution using concurrently
I'm trying to use gulp-elm with a monolithic architecture. I have setup my project dir with client and server directories and I've put my gulp file in the main directory. The directory structure is pretty simple.
project/
gulpfile.js
package.json
client/
elm-package.json
server/
...
When i run, for example,
gulp elm-init
with the following task:
// File paths
var paths = {
dest: 'client/dist',
elm: 'client/src/*.elm',
static: 'client/src/*.{html,css}'
};
// Init Elm
gulp.task('elm-init', function(){
return elm.init({ cwd : 'client' });
});
// Compile Elm to HTML
/*gulp.task('elm', ['elm-init'], function(){
return gulp.src(paths.elm)
.pipe(plumber())
.pipe(elm({ cwd : 'client' }))
.pipe(gulp.dest(paths.dest));
});*/
the elm-stuff folder and elm-package.json get moved to the main project directory. Is this expected? if not, is there a correct way to use a gulpfile from the parent directory to build an elm package in a nested directory? I think my effort matches the example.
gulp.task('init-nested', function(){
return elm.init({cwd: 'elm/nested-elm/'});
});
gulp.task('nested', ['init-nested'], function(){
return gulp.src('elm/nested-elm/*.elm')
.pipe(elm.make({filetype: 'html', cwd: 'elm/nested-elm/'}))
.pipe(gulp.dest('dest/'));
});
I've tried looking at the source, as well as following dependencies to see if i could figure it out myself, but i'm relatively unfamiliar with node so it's hard for me to figure out exactly what's going on in the gulp-elm source (as well as one of the deps i checked out.)
I was using this tutorial by Auth0 which had an old version of gulp-elm in package.json. Ugh!
I have a gulp script that concatenate and minify my JavaScript.
With the gulp-html-replace plugin I can replace all my JS dependancies by the concatened file in my index.html.
I end up with a dev version (/dev/index.html), with all the single JS files included (easier for debugging) and a production version,with all JS concatened (/prod/index.html).
For now I have a config flag (in NodeJS) in a config.js file and I do the following :
res.render(((config.build === 'prod') ? './prod' : './dev') + 'myPage')
But I'm not really happy with this solution as it adds a lot of code and it's easy to forget to write this code.
Is there a better solution ?
Does this solution take place in Gulp
(by havign a gulp prod and a gulp dev for example)
Or does it take place in Node (by setting up a virtual directory for example)
I am new to this npm/gulp/node workflow and not sure of what belongs where
The way I like to do it is by maintaining two separate versions for index.html.
index-development.html for dev environment and index-production.html for production environment.
The index-development.html includes all the scripts and css (non minified and concatenated) and index-production.html as minified and concatenated scripts and css links.
I construct index.html from gulp script.
By default the index-development.html will be deployed.
If I specify parameter p to the gulp script, it will deploy index-production.html
No need to update the file path of the file to be served in your express router.
First do
npm install yargs
In gulp, I include
var argv = require('yargs').argv;
Check if parameter p (gulp -p) is passed to the gulp (p for production) with
var isProduction = argv.p;
and then,
if(isProduction){
taskSequence = ['combineControllers','combineServices','productionsIndex','startServer'];
} else{
taskSequence = ['developmentIndex','startServer'];
}
gulp.task('default', taskSequence);
gulp.task('startServer', function(){
exec('npm start', function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
});
gulp.task('productionsIndex', function(done) {
return gulp.src('./www/index-productions.html')
.pipe(concat('index.html'))
.pipe(gulp.dest('./public/'));
});
gulp.task('developmentIndex', function(done) {
return gulp.src('./www/index-development.html')
.pipe(concat('index.html'))
.pipe(gulp.dest('./public/'));
});
This way, your index.html file will be constructed dynamically without having to change of the code in your express and you can serve it like
res.render('index');
if you want to user myPage.html everywhere, just replace index.html and index in the code above with myPage.html and myPage.
EDIT:
To start your application in development environment, simply run gulp
To start your application in production environment, simply run gulp -p
Simple!
in your app initialization process you can set the path of your views.
app.set('views', process.cwd() + ((config.build === 'prod') ? '/prod' : '/dev'));
Now you can call the render function like this:
res.render('myPage');
I'm trying to figure out how to write a Gulp task, using PostCSS, so that it outputs the resulting files in the postcss subfolder of their original path.
Imagine you have these files:
/app/styles/index.css
/app/elements/pages/home.css
/app/elements/pages/profile.css
And you want Gulp to output the postCSS process to:
/app/styles/postcss/index.css
/app/elements/pages/postcss/home.css
/app/elements/pages/potcss/profile.css
This is my current configuration, but it doesn't work:
gulp.task('css', function () {
return gulp.src([
'app/styles/index.css',
'app/elements/**/*.css'
], {base: './'})
.pipe(gulp.postcss([require('cssnext')()]))
.pipe(gulp.dest('postcss'))
});
In fact, with the abive configuration Gulp will output all files with their relative subdirectories inside one postcss folder in the root of your project.
Any idea how to fix it? Thanks!!
I've found a viable solution, using gulp-rename. This is the updated task configuration:
gulp.task('css', function () {
return gulp.src([
'app/styles/index.css',
'app/elements/**/*.css'
], {base: './'})
.pipe($.postcss([require('cssnext')()]))
.pipe($.rename(function (path) {
path.dirname += "/postcss";
}))
.pipe(gulp.dest('./'))
});
This works perfectly. If anyone though knows a way to do it without using additinal external plugins, just through Gulp basic API, please post it. Thanks! Cheers