所以我的项目种子最初使用的是Grunt,但是它已被破坏,无法帮助在文件夹目标中创建构建。所以我正在尝试(以一种快速的方式)添加Gulp,因为我喜欢它在grunt上的工作方式。也就是说,我的项目是基于Angular的,并且有许多从Kendo UI到Bootstrap到Font Awesome的依赖项。
所以这就是我的困境 - 我可以与我一直在尝试构建的gulp文件一起使用,但从根本上说,我需要更改一些内容,以便我可以简单地将所有文件复制到目的地位置,如果需要,通过URL引用依赖关系,因为我正在使用这些依赖关系的bower和节点组件。现在,我不在乎我是否可以lint,concat,minify等...我只是想将一个文件夹复制到我的服务器并让它工作。我在Windows环境中工作,由于节点和bower组件的文件路径长度,这是不可行的,并且Angular的一些路由和注入破坏。
我的文件结构显示在屏幕截图中:
这显示了我的控制器和视图如何通过naing约定相互对应:
最后,我知道我可以修改我的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);
});