0

更新 #1: 明確化された質問


問題

  • all.jsdist フォルダーにパイプされ、醜化されてから名前が変更されたときに機能しますall.min.js
  • all.jsただし、 Gulp concat で 2 つのファイルcountup.jsscripts.js2 回追加してから、縮小版all.min.jsを assets/dist に追加せずに、assets/dev/js に入ろうとしています。

gulpfile.js

// Include Gulp
var gulp = require("gulp");
var postcss = require("gulp-postcss");

// All of your plugins
var autoprefixer = require("autoprefixer");
var browserSync = require("browser-sync");
var cache = require("gulp-cache");
var concat = require("gulp-concat");
var csswring = require("csswring");
var imagemin = require("gulp-imagemin");
// var jshint = require("gulp-jshint");
// var lost = require("lost");
var minifyHTML = require("gulp-minify-html");
// var moment = require("moment");
var plumber = require("gulp-plumber");
var rename = require("gulp-rename");
// var rucksack = require("rucksack-css");
var sass = require("gulp-sass");
var size = require("gulp-filesize");
var uglify = require("gulp-uglify");
// var upload = require("gulp-awspublish");

// Sync browser, whip up server
gulp.task("browser-sync", function() {
  browserSync({
    server: {
       baseDir: "./"
    }
  });
});

// Reload page automagically
gulp.task("bs-reload", function () {
  browserSync.reload();
});

// Compile Sass into CSS, apply postprocessors
gulp.task("styles", function(){
  var processors = [
      autoprefixer({browsers: ["last 2 version"]}),
      csswring
  ];

  gulp.src(["assets/dev/css/**/*.scss"])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(postcss(processors))
    .pipe(gulp.dest("assets/dev/css/"))
    .pipe(rename("style.min.css"))
    .pipe(gulp.dest("assets/dist"))

    .pipe(browserSync.reload({stream:true}))
});

// Show any JavaScript errors
gulp.task("scripts", function(){
  return gulp.src("assets/dev/js/**/*.js")
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit("end");
    }}))
    .pipe(concat("all.js"))
    .pipe(gulp.dest('assets/dist'))
    .pipe(rename("all.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("assets/dist"))
    .pipe(browserSync.reload({stream:true}))
});

// Minify images
gulp.task("images", function(){
  gulp.src("assets/dev/img/**/*")
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest("assets/dev/img"));
});

// Minify HTML
gulp.task("html", function() {
  var opts = {
    conditionals: true,
    spare:true
  };

  return gulp.src("*.html")
    .pipe(minifyHTML(opts))
    .pipe(rename("index.min.html"))
    .pipe(gulp.dest("assets/dist"));
});

// Size of each of the files
gulp.task("size", function(){
  gulp.src(["*.html", "assets/dev/css/**/*.css", "assets/dev/js/**/*.js", "assets/dev/img/**/*", "assets/dist/**/*"])
    .pipe(size())
});

// Deploy
// gulp.task('publish', function() {
//   var publisher = awspublish.create({
//     params: {
//       Bucket: 'bdnsunproduction'
//     }
//   });

//   var headers = {
//     'Cache-Control': 'max-age=1209600, public'
//   };

//   return gulp.src(["*.html", "assets/dist/css/**/*.css", "assets/dist/js/**/*.js", "assets/dist/img/**/*"])
//     .pipe(awspublish.gzip({ ext: '.gz' }))
//     .pipe(publisher.publish(headers))
//     .pipe(publisher.cache())
//     .pipe(awspublish.reporter());
// });

// Default task
gulp.task('default', ['browser-sync'], function(){
  gulp.watch("assets/dev/css/**/*.scss", ['styles']);
  gulp.watch("assets/dev/js/**/*.js", ['scripts']);
  gulp.watch("*.html", ['bs-reload']);
  gulp.start("images", "styles", "scripts")
});

フォルダ構造

ここに画像の説明を入力

4

0 に答える 0