I am a newbie of gulp, just started now. I am confused in giving src and destination to my task. What i am try to do is to create a new minify destination folder with same inside hierarchy like below.
Current Folder Structure (originals files):
app
-components
--post-creator
---post-creator.component.js
--post-rating
---post-rating.component.js
-routing_components
--app-routing
---app-routing.component.js
--user-routing
---user-routing.component.js
Minify Folder (where js file are minified):
minify_destination
-components
--post-creator
---post-creator.component.js
--post-rating
---post-rating.component.js
-routing_components
--app-routing
---app-routing.component.js
--user-routing
---user-routing.component.js
Gulpfile.js
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('default', function () {
gulp.src('app/components/*/*/*.js')
.pipe(uglify())
.pipe(gulp.dest(components_min))
});
Try:
gulp.src('app/**/*.js')
and everything else as you have it and let me know if that works for you. In this case your components_min should replace the app folder - everything before the glob - and maintain your folder structure.
Related
I am new to gulp so i don't know as much good gulp plugins. I wrote a code for minifying js, css and html using gulp and its plugins which is working fine. But now i am stuck in unminifying code. I don't know which plugins to use which can easily unminify code.
guplfile.js:
var gulp = require('gulp'),
uglify = require('gulp-uglify')
htmlmin = require('gulp-html-minifier')
csso = require('gulp-csso');
gulp.task('min_js', function () {
gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min'))
});
gulp.task('min_html', function () {
gulp.src('app/**/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('min'))
});
gulp.task('min_css', function () {
gulp.src('app/**/*.css')
.pipe(csso())
.pipe(gulp.dest('min'))
});
gulp.task('minify_all', ['min_js', 'min_html', 'min_css']);
//pending
//gulp.task('unminify',[]);
Uglifying/Minifying is attended for production, you should not uglify your code while you are developing (except for testing purpose).
When you start gulp tasks, you have to make sure that you have in one part your "working code", that you will transform into a "destination code".
When you are doing this :
gulp.task('min_js', function () {
gulp.src('app/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min'))
});
The code on which you are working on is in the app folder, and your transformed code is in the min folder (it's the destination folder).
But, if the min directory is also used in development, just disable the uglify task in development (easier to debug a not-uglifyied file).
There is no need to un-minify your sources, there are still present in app folder.
I'm trying to watch my #imported scss files, but for some reason it stopped working. Can't remember changing anything:
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/css/scss/styles.scss',
cssDest = 'assets/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
gulp.task('watch',function() {
gulp.watch(sassFiles,['styles']);
});
My styles.scss:
#import
"fonts.scss",
"basics.scss",
"home.scss";
Whenever I change something in home.scss, I want it to watch, but it only watches styles.scss. Makes sense to me, but it used to work it the beginning..
From documentation
gulp.watch(glob[, opts], tasks)
A single glob or array of globs that indicate which files to watch
for changes.
You watch only that files which are in sassFiles. You can change this line in such way
var sassFiles = 'assets/css/scss/**.scss',
or
var sassFiles = ['assets/css/scss/styles.scss',
'assets/css/scss/fonts.scss','assets/css/scss/basics.scss',
'assets/css/scss/home.scss'],
And all scss-files in folder assets/css/scss/ will be watched.
If you would like to watch files by dependencies (#import) it is better to use webpack
I would like to create a resources.zip file which will contain css/styles.css.
So far I have got most of this working, the only problem is the archive only contains the styles.css file and not its parent directory css.
gulpfile.js
const gulp = require('gulp');
const zip = require('gulp-zip');
gulp.task('default', () => {
return gulp.src('css/*')
.pipe(zip('resources.zip'))
.pipe(gulp.dest('build'));
});
I think you need to setup the base for the gulp.src:
gulp.src('css/*', {base: '.'})
This is because the default base is:
Default: everything before a glob starts (see glob2base)
source. Zipped file path: zip.
I have a folder structure where I keep all my assets similar to this.
-page1
-page1.html
-stylesheets
-page1
-page1style.css
-page2
page2.html
stylesheets
page2
page1style.css
I realize that this isn't the best folder structure but I choose it this way before I could have predicted problems. In my .html files I reference a stylesheet like so /stylesheets/name-of-page/foo.css. Now I am having problems writing a gulp script since all the minified files are being placed at the specified destination folder but have the following structure.
-build
-page1
-stylesheets
-page1.css
when I would like to have something like this
-build
-page1
-page.css
TL;DR or if my question is logic is scrambled : I would like to see the src path of the file at runtime and then perform some string manipulation to calculate its destination.
What you're looking for is gulp-rename:
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('default', function() {
gulp.src('src/**/*')
.pipe(rename(function(file) {
if (file.extname === '.css') {
file.dirname = //change directory to something else
file.basename = //change file name (without extension) to something else
}
}));
});
I also suggest you look into the path module instead of direct string manipulation to adjust the paths of your files.
I use gulp-react to compile jsx to js. I need to save folder structure while compiling.
The code below works good for single folder of all files, but I need dumanic destination
var gulp = require('gulp');
var react = require('gulp-react');
gulp.task('default', function () {
return gulp.src('template.jsx')
.pipe(react())
.pipe(gulp.dest('dist')); // in this line need dumanic destination
});
Any Ideas?
Problem solved like this
gulp.src('./public/js/**/.')