Question

我是Gulp的新手。亲爱的大师，请帮我在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文件文件夹？）。请给我一点建议。
使用gulp-jshint验证javascripts。
使用源映射将scss编译为css，连接它们并在一个theme.css文件中缩小，而不使用额外的variables.css，使用gulp-ruby-sass for windows。

我使用scotch-io/gulp-start作为示例并稍微重新组织了这些内容，但它没有编译任何内容：

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']);
});

请帮助我以最好的方式组织这个处女项目。非常感谢。

如何使用Gulp在Windows上复制，连接和缩小多个js和scss文件？

0 个答案: