在AngularJS中的文件夹中加载JavaScript和CSS文件

GruntJS：http://gruntjs.com/

GulpJS：http://gulpjs.com/

我个人使用GulpJS,因为它看起来要快得多.我发现配置更容易：

包括我的配置文件.
例如,任务“styles”将编译它在我指定的文件夹中找到的每个css文件,将它们连接起来,然后将它们放在分发文件夹中.

由于关于如何使用这些工具的初步学习曲线,您始终可以按照自己的进度集成gulp或grunt.现在你可以让它建立你的CSS文件&稍后通过连接JS来扩展它,并执行各种其他任务.在我看来,它值得学习,因为它可以节省你这么多时间和努力.

var gulp = require("gulp");
var concat = require("gulp-concat");
var html2js = require("gulp-ng-html2js");
var sass = require("gulp-sass");
var clean = require("gulp-clean");
var streamqueue = require("streamqueue");

var ngDepOrder = require("gulp-ng-deporder");

var paths = {
    "dist": "../server/staffing/static/","vendor": ['vendor/underscore/underscore.js','vendor/angular/angular.min.js','vendor/angular-route/angular-route.min.js','vendor/restangular/dist/restangular.min.js','vendor/angular-animate/angular-animate.min.js','vendor/angular-bootstrap/ui-bootstrap-0.7.0.min.js','vendor/angular-bootstrap/ui-bootstrap-tpls-0.7.0.min.js','vendor/angular-ui-router/release/angular-ui-router.min.js','vendor/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js','vendor/momentjs/min/moment.min.js'],"scripts": ['app/**/*.js'],"fonts": ['app-data/fonts/*.*'],"templates": ['app/**/*.html'],"styles": ['app/**/*.scss','vendor/angular-bootstrap-colorpicker/css/*.css']
}

gulp.task("watch",function () {
    gulp.watch('app/**/*.js',['scripts']);
    gulp.watch('app/**/*.html',['scripts'])
    gulp.watch('app/**/*.scss',['styles']);
})

gulp.task("default",["clean"],function () {
    gulp.start("scripts","vendor","styles","fonts");
})

gulp.task("clean",function () {
    return gulp.src(paths.dist,{read: false})
        .pipe(clean({force: true}));
})

gulp.task("vendor",function () {
    gulp.src(paths.vendor)
        .pipe(concat("vendor.js"))
        .pipe(gulp.dest(paths.dist + "js/"));
});

gulp.task("scripts",function () {
    var stream = streamqueue({objectMode: true});
    stream.queue(gulp.src(paths.scripts)
        .pipe(ngDepOrder()));
    stream.queue(gulp.src(paths.templates)
        .pipe(html2js({moduleName: "templates"})));
    return stream.done()
        .pipe(concat("app.js"))
        .pipe(gulp.dest(paths.dist + "js/"))
});

gulp.task("styles",function () {
    gulp.src(paths.styles)
        .pipe(sass())
        .pipe(concat("staffing.css"))
        .pipe(gulp.dest(paths.dist + "css/"))
})

gulp.task("fonts",function () {
    gulp.src(paths.fonts).
        pipe(gulp.dest(paths.dist + "fonts/"))
})