0

Folder Structure

Components ------component1 -partials - js - html - scss - component1.css - component1.js ------component2 -partials - js - html - scss - component2.css - component2.js

Functionality is all my js, html and scss file convert into one css and js fine but inside into the component folder. If I create a new component I don't want every time to add them separately into gulp It will automatically add through gulp. How can I write my gulp to achieve this type of functionality ?

Help will be really appreaticed...!!!

Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
Kinny
  • 47
  • 1
  • 1
  • 10

2 Answers2

0

You can use this code that I created for your case:

Project structure: folder structure tested

gulpfile.js

/**
 * Created by Anderson on 22/04/2016.
 */

'use strict';

var gulp        = require('gulp');
var data        = require('gulp-data');
var concat      = require('gulp-concat');
var sass        = require('gulp-sass');
var gcallback   = require('gulp-callback');
var rename      = require('gulp-rename');
var del         = require('del');
var path        = require('path');
var fs          = require('fs');


gulp.task('main',function(){
    //scan componens folder all files and folders
    gulp.src("./components/**")
        .pipe(data(function(file,cb){
            var filepath = file.path;
            var stats = fs.lstatSync(filepath);

            var base = file.base;
            var fpath = filepath.replace(file.base,"");
            //console.log(fpath);

            var array = fpath.split("\\");
            var basename = path.basename(fpath);
            var componentName = array[0];
            //destiny
            var dest = base + fpath.replace(basename,"");
                dest = dest.replace("partials\\","");

            //process the scss
            if(stats.isDirectory() && basename == "scss"){
                //console.log(array,componentName,basename);
                //console.log(file.path);
                var scssScan = base + fpath+"\\*.scss";
                console.log("scan",scssScan );
                console.log("dest",dest);
                //scan dir for scss
                gulp.src(scssScan)
                    //concat all scss in a temporary file
                    .pipe(concat(componentName+".scss"))
                    .pipe(gulp.dest(dest))
                    .pipe(gcallback(function(){
                        //scan to process the scss
                        var componentPath = base + componentName;
                        var componentScssScan = componentPath + "\\*.scss";
                        //console.log(componentPath,componentScssScan);
                        //console.log(componentPath + "\\" + componentName+".scss");
                        //scan the component dir for scss
                        gulp.src(componentScssScan)
                            //process the sass
                            .pipe(sass())
                            .pipe(gulp.dest(dest));
                            //delete the temporary scss
                            //.pipe(del(componentPath + "\\" + componentName+".scss"));
                    }));

            }

            //process the js
            if(stats.isDirectory() && basename == "js"){
                //console.log(array,componentName,basename);
                //console.log(file.path);
                var scssScan = base + fpath+"\\*.js";
                console.log("scan",scssScan );
                console.log("dest",dest);
                //scan dir for js
                gulp.src(scssScan)
                    //concat all js in a temporary file
                    .pipe(concat(componentName+".js"))
                    .pipe(gulp.dest(dest));

            }

            cb(undefined,undefined);
        }));
});
Anderson Contreira
  • 748
  • 8
  • 12
  • You're welcome! This request was a challenge, but it was very interesting. – Anderson Contreira May 02 '16 at 20:29
  • Hi @anderson can you suggest me which gulp package is better to convert html partials into simple javascript string using gulp. I tried with many gulp packages but didn't work for me. – Kinny May 06 '16 at 05:40
  • I prefer create files with extensions .hbs with the 'gulp-compile-handlebars', and compile it in html, because I will use them as an template in my php project , but you can use the 'gulp-handlebars' to produce the string codes. Handlebars works well for me. – Anderson Contreira May 06 '16 at 18:46
  • You can use this code to produce the js file: gulp.task('templates', function () { gulp.src('templates/*.hbs') .pipe(handlebars()) .pipe(wrap('Handlebars.template(<%= contents %>)')) .pipe(declare({ namespace: 'MyApp.templates', noRedeclare: true, // Avoid duplicate declarations })) .pipe(concat('templates.js')) .pipe(gulp.dest('js/dist')); }); – Anderson Contreira May 06 '16 at 18:46
  • You can see the details here: http://enehana.nohea.com/general/using-handlebars-js-templates-as-precompiled-js-files/ – Anderson Contreira May 06 '16 at 18:47
0

I think what you need to do is add watcher for the css and js files and run specific task based on the changes, here's some example:

var gulp = require('gulp'),
    less = require('gulp-less'),
    cleancss = require('gulp-clean-css'),
    server = require('gulp-server-livereload'),
    rename = require('gulp-rename');

gulp.task('server', ['watch', 'webserver']);

gulp.task('styles', function() {
    return gulp.src('public/assets/less/app.less')
        .pipe(less())
        .pipe(rename('app.css'))
        .pipe(cleancss())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/dist/css'))
});

// Add watcher for the changes in files
gulp.task('watch', function() {
    gulp.watch('public/assets/less/*.less', ['styles']);
})

gulp.task('webserver', function() {
    gulp.src('public')
    .pipe(server({
        livereload: true,
        port: 8080,
        open: true,
    }))
});

And you can use Livereload Chrome Extension to enable browser auto-refresh whenever there's a changes in your code as well.

Danny Pranoto
  • 214
  • 2
  • 12