My folder structure looks like this:
-- Project
- public
- styles
- node
- gulpfile.js
- styles
- global.styl
I want to output converted global.css file into /public folder.
My code as follows:
gulp.task('stylus', function () {
return gulp.src('./styles/global.styl')
.pipe(stylus())
.pipe(autoprefixer('last 2 versions'))
.on('error', handleError)
.pipe(gulp.dest('../public/styles'));
});
What am I missing?
What does your script yield?
Looking at the script, it must create the output as public/styles/styles/global.css.
Adding the option { base: './styles/' } to gulp.src should output the file where you expect it. Check gulp.src API for more.
Hope this helps
Related
I would like to use a bootstrap-template with js-files for my new angularjs project. New modules will be written in typescript.
So my idea was to transcipt all ts files into /build/js/
Then i would concat all js files from /app/**/*.js and from /build/**/*.js into app.js.
My project folder structure looks like this.
app
|-js-files
|-ts-files
build
|js folder with .js.map.files
|-app.js
|-app.js.map
|-vendor.js
On every step sourcemap files will be created.
There are my gulp tasks:
gulp.task('typescript', function () {
var tsResult = tsProject.src()
.pipe(sourcemaps.init()) // sourcemaps will be generated
.pipe(tsProject());
return tsResult.js
.pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest('./build/js'));
});
gulp.task('bundle', function () {
return es.merge(gulp.src(source.js.src), getTemplateStream())
.pipe(sourcemaps.init()) // sourcemaps will be generated
.pipe(concat('app.js'))
.pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest(destinations.js));
});
Is this the right way to set up a project like this?
Source mapping doesn't work...?
Should the folder /build/js be deleted after the bundling into app.js?
Is this the right way to set up a project like this
Personally no. Have all the files .js and .ts in the same folder ./src. Set allowJs:true and outDir:'./dist'. Then slowly start the .js -> .ts migration as needed.
More
As an example checkout this quick video : https://www.youtube.com/watch?v=gmKXXI_ck7w
I recently developed a second page on one of my websites which I put in my projects folder so it can be accessed like "www.mysite.com/projects" My directory looks like this:
|js
|css
|projects - has index.php
|img
index.php
mailer.php
My Gulp file:
I used Gulp useref like this:
gulp.task('useref', function(){
return gulp.src('app/*.php')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
.pipe(gulp.dest('dist'))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
But when I execute the command to run useref, it doesn't useref the php file in projects or move the folder over to my dist folder. I tried doing it like return gulp.src('app/**/*.php') but that doesn't work either. Any ideas?
I think you have something backwards here. You have to pipe into useref your index file. Meaning that your source is not every php file in your app, but
gulp.src('your_Path/index.html')
Then, you have to tell useref where to look for all the files referenced in index.html with:
.pipe(useref({
searchPath: 'app/' // I'm guessing this is the path
}))
Also, you only need one dest in this case. Which makes your task:
gulp.task('useref', function(){
return gulp.src('your_Path/index.html') // Check this path
.pipe(useref({
searchPath: 'app/' // Check this path
}))
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
I have an app. My app source code is structured like this:
./
gulpfile.js
src
img
bg.png
logo.png
data
list.json
favicon.ico
web.config
index.html
deploy
I am trying to use Gulp to copy two files: ./img/bg.png and ./data/list.json. I want to copy these two files to the root of the deploy directory. In other words, the result of the task should have:
./
deploy
imgs
bg.png
data
list.json
How do I write a Gulp task to do this type of copying? The thing that is confusing me is the fact that I want my task to copy two seperate files instead of files that fit a pattern. I know if I had a pattern, I could do this:
var copy = require('gulp-copy');
gulp.task('copy-resources', function() {
return gulp.src('./src/img/*.png')
.pipe(gulp.dest('./deploy'))
;
});
Yet, I'm still not sure how to do this with two seperate files.
Thanks
You can create separate tasks for each target directory, and then combine them using a general "copy-resources" task.
gulp.task('copy-img', function() {
return gulp.src('./src/img/*.png')
.pipe(gulp.dest('./deploy/imgs'));
});
gulp.task('copy-data', function() {
return gulp.src('./src/data/*.json')
.pipe(gulp.dest('./deploy/data'));
});
gulp.task('copy-resources', ['copy-img', 'copy-data']);
You could also use merge-stream
Install dependency:
npm i -D merge-stream
Load the depedency in your gulp file and use it:
const merge = require("merge-stream");
gulp.task('copy-resources', function() {
return merge([
gulp.src('./src/img/*.png').pipe(gulp.dest('./deploy/imgs')),
gulp.src('./src/data/*.json').pipe(gulp.dest('./deploy/data'))
]);
});
I have a task:
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
When I am adding new empty ".scss" file to '/admin_app/scss/' and running task from above, empty ".scss" files is copied to destination folder. If file is not empty everything is ok: a valid css file( with ".css" extension) is compiled and no ".scss" files are copied. The problem is when I add new ".scss" file to "/admin_app/scss/" directory, a "watch" task is triggered, and because file is empty, it is copied to destination directory. As a result, a lot of unneeded garbage is dest folder. Why this happens and how can I get rid of it?
UPDATED
My "watch" and "default" tasks:
gulp.task('watch', ['compile_scss'], function() {
apps.forEach(function(appName) {
gulp.watch('/admin_app/scss/*.scss', ['compile_scss']);
});
});
gulp.task('default', ['watch']);
One way to solve this problem would be to simply filter the empty files.
Try something like this:
var filter = require('gulp-filter'),
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(filter(function(a){ return a.stat && a.stat.size }))
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
There's also a plugin specifically for this purpose. You can use it like this:
var clip = require('gulp-clip-empty-files'),
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(clip())
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
In addition: there seem to have been several reports of problems in gulp-sass and underlying libraries when compiling empty files. There is a Github issue for gulp-sass, reporting this should be solved in the 2.x versions of the plugin. If you're already running 2.x, the problem you are facing might be an issue introduced by solving the original problem.
If you add empty scss files in your sass folder, prefix them with underscore: _empty.scss.
See "Partials" here: http://sass-lang.com/guide#topic-4
You can create partial Sass files that contain little snippets of CSS
that you can include in other Sass files. This is a great way to
modularize your CSS and help keep things easier to maintain. A partial
is simply a Sass file named with a leading underscore. You might name
it something like _partial.scss. The underscore lets Sass know that
the file is only a partial file and that it should not be generated
into a CSS file. Sass partials are used with the #import directive.
I'm trying to run Gulp Sass for all of my files in a folder and its subfolders and keep the css results at the path where the scss file is.
When I run this
var filter = filters(['*', '!app/css/skins/color-vars-template.scss', '!app/css/skins/skin-template.scss']);
gulp.task('sass', function () {
gulp.src('app/css/*.scss')
.pipe(filter)
.pipe(sass())
.pipe(gulp.dest("app/css"))
});
I have the css compiled files in the app/css folder.
Now when I run this
var filter = filters(['*', '!app/css/skins/color-vars-template.scss', '!app/css/skins/skin-template.scss']);
gulp.task('sass', function () {
gulp.src('app/**/*.scss')
.pipe(filter)
.pipe(sass())
.pipe(gulp.dest("app/**/*"))
});
I want to compile all of the scss files and keep the css files in the folder where the scss file is however nothing happens.
It looks like you could just simplify your gulp.dest to get file path you want.
change: .pipe(gulp.dest("app/**/*"))
to: .pipe(gulp.dest("app"))
Explained here: https://stackoverflow.com/a/23249384/284091
The destination doesn't need to be dynamic as the globbed path is used for the dest as well. Simply pipe to the same base directory you're globbing the src from, in this case "app".