Schluckaufgabe zum Zusammenführen von Javascript und Frameworks

Question

Ich bin komplett neu bei WebDev und Gulp. Ich erstelle gerade ein eigenes Projekt zum Experimentieren. Ich möchte Angular 1 und Bootstrap verwenden. Was ich bisher gemacht habe, ist Bootstrap über NPM zu installieren. Erstellen Sie eine main.less-Datei, in die ich die Bootstrap.less-Datei und alle meine eigenen weniger Dateien importiere. Diese main.less-Datei wird dann in eine öffentliche CSS-Datei kompiliert, die mit gulp-inject in die index.html injiziert wird.

Jetzt zum Javascript-Teil. Ich möchte auch eine Javascript-Datei haben, die in die index.html injiziert wird.

Zuallererst ist dies ratsam, oder sollte ich einfach alle Javascript-Dateien, die ich erstellen werde automatisch injizieren?

Und wie adressiere ich meine Frameworks? Ich weiß, ich kann require('angular') zum Beispiel in einer Javascript-Datei tun. Aber wo soll ich das hinstellen?

Answer 1

Es gibt viele Dinge, die Sie versuchen, alle auf einmal zu lernen. Ich würde vorschlagen, einen Teil abzulegen, bevor wir zum nächsten Teil übergehen. Dies gilt insbesondere, wenn Sie gerade anfangen, Web-Entwicklung zu lernen.

Ich würde empfehlen, zuerst zu lernen und dann Ihre Build-Umgebung zu nageln, da es Ihnen wertvolle Werkzeuge zur Verfügung stellt, die Ihnen viel Zeit sparen.

Wenn Sie schlucken nicht installiert haben noch müssen Sie es über npm wie folgt installieren:

npm install gulp --save-dev 

Hinweis: Sie müssen sudo npm schluck installieren verwenden --save-dev, wenn Sie erhalten Fehler bei der Installation von npm-Paketen, abhängig von Ihrem Betriebssystem und seiner Umgebung.

Der --save-dev-Teil platziert einen Verweis auf Ihre Entwicklungsabhängigkeiten in Ihrer package.json-Datei. Dies ermöglicht jedem, der Ihr Projekt auf seinem System installiert, npm zu installieren und sie sollten alle Abhängigkeiten erhalten, die benötigt werden, um Ihr auf Ihrem System installiertes Projekt auszuführen.

Unten finden Sie eine Liste der Dinge, die Sie über die npm install Paketname --save-dev-Methode, die ich bereits beschrieben habe, installieren möchten.

npm install gulp --save-dev (needed for to run gulp commands) 

npm install gulp-less --save-dev (compiles your less files in to css) 

npm install gulp-concat --save-dev (concats your js files into one file) 

npm install gulp-uglifiy --save-dev (compresses, minifies your js file) 

npm install gulp browser-sync --save-dev (loads your project using a http server and enables hot reloading of the page.) 

UPDATE: Als Alternative können die oben genannten Pakete einzeln zu installieren Sie können die folgenden package.json Datei verwenden können. Setzen Sie es in Ihren Projekten Wurzel und geben npm in der Befehlszeile installieren (Sie müssen verwenden sudo npm auf Ihrem System installieren, abhängig.

package.json

"name": "bootstrap-angular-less", 
    "version": "1.0.0", 
    "description": "Basic Angular 1 build package with support for bootstrap and less.", 
    "main": "index.html", 
    "dependencies": { 
    "angular": "^1.5.8", 
    "bootstrap": "^3.3.7", 
    "gulp": "^3.9.1" 
    }, 
    "devDependencies": { 
    "browser-sync": "^2.13.0", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-less": "^3.1.0", 
    "gulp-uglify": "^1.5.4", 
    "gulp-util": "^3.0.7", 
    "path": "^0.12.7" 
    }, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Larry J Lane", 
    "license": "ISC" 
} 

Nachdem Sie alle installierten die Abhängigkeiten, einen Dateinamen gulpfile.js und in der Wurzel Ihres Projektes machen. Nachdem die Datei in dem folgenden Code erstellt wird, hinzufügen.

**gulpfile.js** 


//require all of the gulp modules 
var gulp = require('gulp'); 
var browserSync = require('browser-sync'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var less = require('gulp-less'); 
var util = require('gulp-util'); 
var path = require('path'); 




var dirs = { 
    src: './app/src', 
    dest: './app/build' 
}; 

var jsPaths = { 

jsSrc: dirs.src + "/assets/js/*.js", 
jsDest: dirs.dest + "/assets/js/" 

}; 

var lessPaths = { 
    src: dirs.src + "/assets/less/main.less", 
    dest: dirs.dest + "/assets/styles/" 
}; 

var templatePaths = { 

    src: dirs.src + "/*.html", 
    dest: dirs.dest + "/" 

} 



// Browsersync server that watches CSS, HTML, and JS 
gulp.task('server', ['html','css','js'],function() { 


    browserSync.init({ 

     server: { 
     baseDir: dirs.dest, 
     serveStaticOptions: { 
      extensions: ['html'] 
     } 
    } 
    }); 


    gulp.watch(dirs.src + "/assets/less/**/*.less", ['css']); 

    gulp.watch(dirs.src + "/assets/js/*.js", ['js']); 

    gulp.watch(templatePaths.src, ['html']); 

    browserSync.watch(templatePaths.dest + '*.html').on('change', browserSync.reload); 

}); 

// CSS Preprocessing. Uses Less to pre-process and pipes stream to Browsersync. 
gulp.task('css', function() { 
    return gulp.src(lessPaths.src) 
    .pipe(less()) 
    .pipe(concat('main.css')) 
    .pipe(gulp.dest(lessPaths.dest)) 
    .pipe(browserSync.stream()); 
}); 

//HTML processing. 
gulp.task('html', function() { 

    return gulp.src(templatePaths.src) 
     .pipe(gulp.dest(templatePaths.dest)); 
}); 


gulp.task('js', function() { 

    return gulp.src([jsPaths.jsSrc]) 
    .pipe(concat('bundler.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest(jsPaths.jsDest)) 
    .pipe(browserSync.stream()); 

}); 

//Default task that will run when type gulp in the command line. 
gulp.task('default', ['server']); 

Als nächstes müssen Sie ein paar Ordner in der erstellen ro ot Ihres Projekts. Erstellen Sie einen Ordner namens app und legen Sie zwei neue Ordner darin ab. Der erste sollte Build genannt werden und der zweite src. Sie werden Ihre gesamte Entwicklung aus dem src-Ordner heraus erledigen. Nachdem Sie diese Ordner erstellt haben, legen Sie eine Datei namens index.html im Ordner src mit folgendem Inhalt ab.

index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>A basic gulp browser sync build template</title> 
<link href="/assets/styles/main.css" type="text/css" rel ="stylesheet"> 
</head> 
<body> 


This is a basic gulp browser sync build template with support for less. 

<script type="text/javascript" src="/assets/js/bundler.js"></script> 
</body> 
</html> 

Sobald alle, die zusammen aus der Befehlszeile eines Zuges gesetzt wird und es sollte das Projekt in Ihrem Browser laden. Alle Änderungen, die an index.html vorgenommen werden, weniger Dateien in app/src/assets/styles/less /, Javascript-Dateien innerhalb von app/src/assets/js werden automatisch aktualisiert und im Browser angezeigt. Alle weniger Dateien innerhalb des less-Ordners werden in eine Datei namens main.css kompiliert und alle js-Dateien im js-Ordner werden in eine Javascript-Datei namens bündler.js kompiliert.

Beliebige weniger Dateien, die Sie laden möchten, wie zB weniger Dateien vom Bootstrap, können Sie zum Beispiel über einen Import in die Datei main.less laden. Beispiel unten aus der Datei main.less.

main.less

//import less files 
@import 'partials/_globals.less'; 

Alle Dateien, die Sie Ihre eigenen CSS Sie im partials Ordner innerhalb des weniger Ordner benötigen. Ich habe versucht, die Struktur so einfach wie möglich zu machen, also schau dich um und lass es mich wissen, wenn du Fragen hast.

, dass es jetzt ist es dauern, für eine Probefahrt, um zu sehen, wie es funktioniert und wenn Sie denken, es wird für Sie arbeiten, dann können wir über das Hinzufügen der Winkelintegration arbeiten ...