Compilation 如何在Windows上使用Gulp将多个js和scss文件复制、连接和缩小为一个?

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

我是一个新的吞咽高手。亲爱的大师,请帮助我组织我在windows上的项目。 本项目的结构如下:

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,我想达到以下目标:

  • 将jquery.min.js和bootstrap.min.js复制到template/js文件夹中,将它们连接到一个缩小的template.min.js中(这是完全合理的还是最好直接从bower_components供应商文件夹中包含js文件?)。请给我一个建议
  • 使用gulpjshint验证javascripts
  • 使用sourcemaps将SCS编译为css,将它们连接在一起,并使用gulp ruby sass for windows在一个theme.css文件中缩小,而不使用额外的变量.css
  • 我举了一个例子,对这些东西进行了一些重新组织,但它没有编译任何东西:

    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']);
    });
    
    请帮助我以最好的方式组织这个维珍项目。非常感谢