Compilation 如何在Windows上使用Gulp将多个js和scss文件复制、连接和缩小为一个?
我是一个新的吞咽高手。亲爱的大师,请帮助我组织我在windows上的项目。 本项目的结构如下:Compilation 如何在Windows上使用Gulp将多个js和scss文件复制、连接和缩小为一个?,compilation,concatenation,gulp,bundling-and-minification,project-organization,Compilation,Concatenation,Gulp,Bundling And Minification,Project Organization,我是一个新的吞咽高手。亲爱的大师,请帮助我组织我在windows上的项目。 本项目的结构如下: root | bower_components | | bootstrap-sass | | | assets | | | | javascript | | | | | bootstrap.min.js (second input javascript) | | jquery | | | dist | | | | jquery.min.js (first input javascrip
root
| bower_components
| | bootstrap-sass
| | | assets
| | | | javascript
| | | | | bootstrap.min.js (second input javascript)
| | jquery
| | | dist
| | | | jquery.min.js (first input javascript)
| template
| | css (output folder for stylesheets)
| | js (output folder for javascripts)
| | scss (input folder for scss)
| | | variables.scss
| | | theme.scss
gulpfile.js
index.html
package.json
我在package.json中将gulp定义为devDependency:
{
"devDependencies": {
"gulp": "^3.5.6"
}
}
使用Gulp,我想达到以下目标:
var gulp = require('gulp'),
gutil = require('gulp-util'),
jshint = require('gulp-jshint'),
sass = require('gulp-ruby-sass'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
input = {
'sass': 'template/scss/**/*.scss',
'javascript': 'temaplate/js/**/*.js'
},
output = {
'stylesheets': 'template/css',
'javascript': 'template/js'
};
/* run the watch task when gulp is called without arguments */
gulp.task('default', ['watch']);
/* run javascript through jshint */
gulp.task('jshint', function() {
return gulp.src(input.javascript)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
/* compile scss files */
gulp.task('build-css', function() {
return gulp.src('template/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest(output.stylesheets));
});
/* concat javascript files, minify if --type production */
gulp.task('build-js', function() {
gulp.src('bower_components/jquery/dist/jquery.min.js',
'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js')
.pipe(gulp.dest('template/js/'));
gulp.src(input.javascript)
.pipe(sourcemaps.init())
.pipe(concat('bundle.js'))
//only uglify if gulp is ran with '--type production'
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write())
.pipe(gulp.dest(output.javascript));
});
/* Watch these files for changes and run the task on update */
gulp.task('watch', function() {
gulp.watch(input.javascript, ['jshint', 'build-js']);
gulp.watch(input.sass, ['build-css']);
});
请帮助我以最好的方式组织这个维珍项目。非常感谢