Wie wird der Schluck für diese Art von Gerüst aufgebaut?

Question

Ordnerstruktur

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

Funktionalität ist alles meine js, html und SCSS-Datei in eine CSS konvertieren und js in Ordnung, aber innen in den Komponentenordner. Wenn ich eine neue Komponente erstelle, möchte ich sie nicht jedes Mal separat in den Schluck einfügen. Sie wird automatisch durch den Schluck hinzugefügt. Wie kann ich meinen Schluck schreiben, um diese Art von Funktionalität zu erreichen?

Hilfe wird wirklich appated ... !!!

Answer 1

Sie diesen Code verwenden können, die ich für den Fall erstellt:

Projektstruktur: 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); 
     })); 
}); 

Answer 2

Ich denke, was Sie tun müssen, ist Beobachter hinzufügen für die css und js Dateien und führen bestimmte Aufgabe basierend auf den Änderungen, hier ist ein Beispiel:

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, 
    })) 
}); 

Und Sie können Livereload Chrome Extension verwenden, um die automatische Aktualisierung des Browsers zu aktivieren, wenn sich auch Änderungen in Ihrem Code ergeben.