Question

我有关于如何在此文件夹结构上正确配置路径的问题。所以我的文件夹结构是：

bower_components/
node_modules/
app/
   components/
              home/
                   controller/
                              homeCtrl.js
                   css/
                         home.css
                   home.html

    shared/
           css/
           directives/
           filters/
           directives/
           sass/
           services/
assets/
    audio/
    debug/
    lib/
    etc...

gulp/
   paths.js

gulpfile.js
index.html
etc....

如上所示，你可以看到文件夹结构，如果你想和我一起工作，你可以去here，我们可以快速，快速地解决问题！否则，上面是我的结构的一个例子..在我的paths.js我有：

module.exports = {
    dest: 'assets/dist',
    js: [
        'app/app.module.js',
        'app/app.run.js',
        'app/shared/**/*.module.js',
        'app/shared/**/*.js',
        'app/components/**/*.js',
        'app/components/**/*.module.js'
    ],
    sass: ['app/shared/**/*.sass'],
    vendor_js: [
         'bower_components/angular/angular.js',
         'bower_components/jquery/dist/jquery.js',
         'bower_components/angular-ui-router/release/angular-ui-router.min.js',
         'bower_components/angular-material/angular-material.min.js',
         'bower_components/angular-animate/angular-animate.min.js',
         'bower_components/angular-aria/angular-aria.min.js',
         'bower_components/angular-messages/angular-messages.min.js',
         'bower_components/firebase/firebase.min.js',
         'bower_components/angularfire/dist/angularfire.min.js',
         'assets/lib/svg-assets-cache/svg-assets-cache.js',
         'node_modules/alertifyjs/build/alertify.min.js',
         'bower_components/vex/js/vex.combined.min.js',
         'bower_components/clipboard/dist/clipboard.min.js',
         'bower_components/marked/lib/marked.js',
         'bower_components/highlightjs/highlight.pack.js',
         'bower_components/angular-socialshare/dist/angular-socialshare.min.js',
         'assets/lib/Recaptcha/googleRecaptchaAPI.js',
         'bower_components/angular-recaptcha/release/angular-recaptcha.min.js',
         'assets/lib/angular-screenfull/angular-screenfull.min.js',
         'assets/lib/screenfull/screenfull.min.js',
         'bower_components/selectize/dist/js/standalone/selectize.min.js',
         'assets/lib/angular-selectize/angular-selectize.js'
    ],
    vendor_styles: [
        'bower_components/selectize/dist/css/selectize.css',
        'bower_components/font-awesome/css/font-awesome.min.css',
        'node_modules/alertifyjs/build/css/alertify.css',
        'node_modules/alertifyjs/build/css/themes/semantic.min.css',
        'bower_components/vex/css/vex.css',
        'bower_components/vex/css/vex-theme-flat-attack.css',
        'assets/lib/material-charts/material-charts.min.css'
    ]
};

在gulpfile.js中：

//Require Gulp
var gulp = require("gulp");
var ngAnnotate = require("gulp-ng-annotate");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var sourceMaps = require("gulp-sourcemaps");
var util = require('gulp-util');
var clean = require("gulp-clean");
var sass = require('gulp-sass');
// var minifyCss = require('gulp-minify-css');

var paths = require("./gulp/paths");

//remove temporary directories like dist
gulp.task('clean', function() {
    return gulp.src('assets/dist', {read: false})
    .pipe(clean());
});

// combines all js files into one and create sourcemaps for them
gulp.task('scripts', function(done) {
    gulp.src(paths.js)
    .pipe(sourceMaps.init())
    .pipe(concat('app.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify().on('error', util.log))
    .pipe(sourceMaps.write('.'))
    .pipe(gulp.dest(paths.dest))
    .on('error', util.log)
    .on('end', done);
});

gulp.task('watch', function() {
    gulp.watch(paths.js, ['scripts'])
});

gulp.task('scripts:vendor', function() {
   return gulp.src(paths.vendor_js)
    .pipe(concat('vendor.min.js'))
    // .pipe(uglify().on('error', util.log))
    .pipe(gulp.dest(paths.dest));
});

gulp.task('default', function() {
    console.log("running gulp");
});

当我运行它时，它告诉我Angular未定义。我非常确定这是因为路径，因为当我更改路径时它不会给我错误，但仍然说'Angular未定义' 。非常感谢帮助，我们也可以解决here ...

的index.html：

<!DOCTYPE html>
<html lang="en" class="html_container">

<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <meta name="viewport" content="width=1200">
    <title>Ng-Forum</title>

    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="node_modules/alertifyjs/build/css/alertify.css" />
    <link rel="stylesheet" href="node_modules/alertifyjs/build/css/themes/semantic.min.css" />
    <link rel="stylesheet" href="bower_components/vex/css/vex.css" />
    <link rel="stylesheet" href="bower_components/vex/css/vex-theme-flat-attack.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/amanuel2/MathGame/master/chartjs/material-charts.min.css" type="text/css" />
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
    <link rel="icon" href="favicon.ico">

</head>

<body ng-app="ForumApp">
    <div ui-view></div>
    <!--<script type="text/javascript" src="https://code.angularjs.org/1.4.9/angular.js"></script>-->
    <script type="text/javscript" src="assets/dist/vendor.min.js"></script>
    <script type="text/javascript" src="assets/dist/app.min.js"></script>

</body>

</html>

如何在gulp这个结构中正确配置路径

0 个答案: