1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | |--bower_components |--build |--node_modules |--static_pages |--js |--controllers |--services |--app.js // app 启动配置 |--style |--main.css |--view |--note.html |--gulpfile.js // gulp 配置 |--bower.json // bower 配置 |--package.json // node module 配置 |--index.html // app 启动文件 |
1 2 3 4 5 6 7 | var paths = { js: ['./js/app.js', 'js/**/*.js'], css: ['./style/**/*.css'], templates: './js/templates.js', buildjs: ['./build/**/*.js'], buildcss: ['./build/**/*.css'] }; |
1 2 3 4 5 6 | var jshint = require('gulp-jshint'); gulp.task('jshint', function() { gulp.src(paths.js) .pipe(jshint()) .pipe(jshint.reporter('default')); }); |
1 2 3 4 5 | var del = require('del'); gulp.task('clean', function() { // You can use multiple globbing patterns as you would with `gulp.src` return del(['./build', paths.templates]); }); |
1 2 3 4 5 6 | var templateCache = require('gulp-angular-templatecache'); gulp.task('template', function () { return gulp.src('./view/**/*.html') .pipe(templateCache({module: 'myApp'})) .pipe(gulp.dest('./js')) }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | gulp.task('js', function() { if (deployEnvironment == Environment.DEV) { // DEV return gulp.src(paths.js) .pipe(concat('all.js')) .pipe(gulp.dest('./build')); } else { // PROD return gulp.src(paths.js) .pipe(sourcemaps.init()) .pipe(stripDebug()) .pipe(uglify()) .pipe(concat('all.min.js')) .pipe(sourcemaps.write()) .pipe(gulp.dest('./build')); } }); |
1 2 3 4 5 6 7 | var cssmin = require('gulp-cssmin'); gulp.task('deployCSS', function() { return gulp.src(paths.css) .pipe(cssmin()) .pipe(concat('all.css')) .pipe(gulp.dest('./build')); }); |
1 2 | <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> |
1 | $ bower install –-save-dev angular |
1 2 3 | "dependencies": { "angular": "^1.5.7" }, |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en" data-ng-app="myApp"> <head> <meta charset="utf-8"> <title>Angular UI Router</title> <!-- bower:css --> <!-- endinject --> <!-- inject:css --> <!-- endinject --> </head> <body> <a ui-sref="note">go note</a> <div ui-view></div> <!-- bower:js --> <!-- endinject --> <!-- inject:js --> <!-- endinject --> </body> </html> |
1 2 3 4 5 6 7 8 | gulp.task('devIndex', ['clean', 'jshint'], function () { // It's not necessary to read the files (will speed up things), we're only after their paths: return gulp.src('./index.html') .pipe(inject(gulp.src(paths.js, {read: false}), {relative: true})) .pipe(inject(gulp.src(paths.css, {read: false}), {relative: true})) .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true})) .pipe(gulp.dest('./')); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html lang="en" data-ng-app="myApp"> <head> <meta charset="utf-8"> <title>Angular UI Router</title> <!-- bower:css --> <link rel="stylesheet" href="bower_components/normalize-css/normalize.css"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css"> <!-- endinject --> <!-- inject:css --> <link rel="stylesheet" href="style/main.css"> <!-- endinject --> </head> <body> <a ui-sref="note">go note</a> <div ui-view></div> <!-- bower:js --> <script src="bower_components/angular/angular.js"></script> <!-- endinject --> <!-- inject:js --> <script src="js/app.js"></script> <script src="js/controllers/note.js"></script> <script src="js/services/note.js"></script> <!-- endinject --> </body> </html> |
1 2 3 4 5 6 7 8 | gulp.task('deployIndex', ['clean', 'jshint', 'template', 'deployJS', 'deployCSS'], function () { // It's not necessary to read the files (will speed up things), we're only after their paths: return gulp.src('./index.html') .pipe(inject(gulp.src(paths.buildjs, {read: false}), {relative: true})) .pipe(inject(gulp.src(paths.buildcss, {read: false}), {relative: true})) .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true})) .pipe(gulp.dest('./')); }); |
1 2 3 4 5 6 | <!-- inject:css --> <link rel="stylesheet" href="build/all.css"> <!-- endinject --> <!-- inject:js --> <script src="build/all.min.js"></script> <!-- endinject --> |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |