现有的Angular项目包含node,bower和now Gulp

时间:2015-09-24 06:12:41

标签: html angularjs build gulp

所以我的项目种子最初使用的是Grunt,但是它已被破坏,无法帮助在文件夹目标中创建构建。所以我正在尝试(以一种快速的方式)添加Gulp,因为我喜欢它在grunt上的工作方式。也就是说,我的项目是基于Angular的,并且有许多从Kendo UI到Bootstrap到Font Awesome的依赖项。

所以这就是我的困境 - 我可以与我一直在尝试构建的gulp文件一起使用,但从根本上说,我需要更改一些内容,以便我可以简单地将所有文件复制到目的地位置,如果需要,通过URL引用依赖关系,因为我正在使用这些依赖关系的bower和节点组件。现在,我不在乎我是否可以lint,concat,minify等...我只是想将一个文件夹复制到我的服务器并让它工作。我在Windows环境中工作,由于节点和bower组件的文件路径长度,这是不可行的,并且Angular的一些路由和注入破坏。

我的文件结构显示在屏幕截图中:

enter image description here

这显示了我的控制器和视图如何通过naing约定相互对应:

enter image description here

最后,我知道我可以修改我的index.html中的引用以帮助我的脚本和所有内容,但不知道如果我的搜索努力,如何使用gulp。

你们中的任何人都能告诉我一些解决方法,以便我可以快速构建并稍后再添加其他功能吗?

非常感谢所有帮助!

我当前的gulpfile.js:

/*!
 * gulp
 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
 */

// Load plugins
var gulp = require('gulp'),
    // sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    uncss = require('gulp-uncss'),
    htmlmin = require('gulp-htmlmin'),
    svgmin = require('gulp-svgmin'),
    // angular-filesort = require('gulp-angular-filesort'),
    // bower-files = require('gulp-main-bower-files'),
    // livereload = require('gulp-livereload'),
    del = require('del');

// Styles
gulp.task('styles', function() {
  // return sass('src/styles/main.scss', { style: 'expanded' })
  return gulp.src('app/ppt/styles/main.css')  
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/assets/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/assets/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

// Scripts
gulp.task('scripts', function() {
  return gulp.src('app/ppt/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

// Images
gulp.task('images', function() {
  return gulp.src('app/ppt/assets/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/assets/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

// Clean
gulp.task('clean', function(cb) {
    del(['dist/assets/styles', 'dist/assets/scripts', 'dist/assets/images'], cb)
});

// Default task
gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

// Watch
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('src/images/**/*', ['images']);

  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

0 个答案:

没有答案