2017-11-09 10 views
0

私はgulpの初心者ですが、私はこのプロジェクトで実装しようとしています。しかし、私はマッシュアップのどこかのように見えます。私はjsファイルを注文し、バンドルを入手しようとしていました。しかし、jqueryのlibのように見えるか何かが動作していません。ここでgulpバンドル後にJqueryライブラリが動作しない

は私gulpfile.jsコードです:

'use strict'; 


// include all necessary plugins in gulp file 
var gulp    = require('gulp'); 
var order    = require('gulp-order'); 
var concat    = require('gulp-concat'); 
var sass    = require('gulp-sass'); 
var sourcemaps   = require('gulp-sourcemaps'); 
var uglify    = require('gulp-uglify'); 
var rename    = require('gulp-rename'); 
var imagemin   = require('gulp-imagemin'); 
var cache    = require('gulp-cache'); 

// Task defined for java scripts bundling and minifying 

gulp.task('scripts', function() { 
    return gulp.src('assets/src/js/*.js')  
    .pipe(order([ 
     "assets/src/js/jquery-3.2.1.slim.min.js", 
     "assets/src/popper.min.js", 
     "assets/src/js/bootstrap.min.js", 
     "assets/src/js/morphext.min.js", 
     "assets/src/js/pushy.min.js", 
     "assets/src/quote.js" 
     ], { base: './' })) 
     .pipe(concat('bundle.js')) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/dist/js')); 
}); 

// Task define for compliling scss file  
// Currently i am not using this complier 
gulp.task('sass', function() { 
    return gulp.src('assets/src/css/**/*.scss', {style: 'compressed'}) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(sourcemaps.init()) // Process the original sources 
     .pipe(sass()) 
     .pipe(sourcemaps.write()) // Add the map to modified source. 
     .pipe(gulp.dest('assets/dist/css/')); 
}); 

// Define task to optimize images in project 
gulp.task('images', function() { 
    return gulp.src('assets/src/img/**/*') 
    .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))) 
    .pipe(gulp.dest('assets/dist//img')); 
}); 

// Task watch 
gulp.task('watch', function() { 
     // Watch .js files 
     gulp.watch('assets/src/js/*.js', ['scripts']); 

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

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


// declaring final task and command tasker 
// just hit the command "gulp" it will run the following tasks... 
gulp.task('default', ['scripts', 'images' , 'watch']); 
+0

bundle.js内にjqueryコードがありますか?また、 '(gulp.dest( 'assets/dist // img'));' a typo? –

+0

@GeorgeCampbellはいバンドル内のコードは見えますが、動作しませんが – Arick

答えて

0

私はこの問題の解決策を持って、ここgulp.jsのための私の新しいコードがあります!

'use strict'; 

// include all necessary plugins in gulp file 

var gulp    = require('gulp'); 
var concat    = require('gulp-concat'); 
var sass    = require('gulp-sass'); 
var sourcemaps   = require('gulp-sourcemaps'); 
var uglify    = require('gulp-uglify'); 
var rename    = require('gulp-rename'); 
var imagemin   = require('gulp-imagemin'); 
var cache    = require('gulp-cache'); 

// Task defined for java scripts bundling and minifying 

gulp.task('scripts', function() { 
     return gulp.src 
      ([ 
      'assets/src/js/jquery/*.js', 
      'assets/src/js/vendor/*.js', 
      'assets/src/js/plugins/*.js', 
      'assets/src/js/custom/*.js', 
      ]) 

     .pipe(concat('bundle.js')) 
     .pipe(rename({suffix: '.min'})) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/dist/js/')); 
}); 

// Task define for compliling scss file 

gulp.task('sass', function() { 
     return gulp.src('assets/src/scss/**/*.scss', {style: 'compressed'}) 
     .pipe(rename({suffix: 'custom'})) 
     .pipe(sourcemaps.init()) // Process the original sources 
     .pipe(sass()) 
     .pipe(sourcemaps.write()) // Add the map to modified source. 
     .pipe(gulp.dest('assets/dist/css/unminified/')); 
}); 

// Define task to optimize images in project 

gulp.task('images', function() { 
    return gulp.src('assets/src/img/**/*') 
    .pipe(cache(imagemin({ optimizationLevel:5, progressive: true, interlaced: true }))) 
    .pipe(gulp.dest('assets/dist/img')); 
}); 

// Task watch 

gulp.task('watch', function() { 
     // Watch .js files 
     gulp.watch('assets/src/js/*.js', ['scripts']); 
     // Watch .scss files 
     gulp.watch('assets/src/scss/*.scss', ['sass']); 
     // Watch image files 
     gulp.watch('assets/src/img/**/*', ['images']); 
}); 

// declaring final task and command tasker 

// just hit the command "gulp" it will run the following tasks... 

gulp.task('default', ['scripts', 'images' , 'sass' , 'watch']); 
+0

@klutt編集ありがとう! – Arick

関連する問題