目标
我正在更新我的旧gulpfile.js,以前主要是将我的Sass编译成CSS,但是现在我试图让Gulp执行以下操作:
>同步浏览器,打开本地主机服务器 – 完成
>编译Sass => CSS – 完成
>使用JSHint – DONE显示任何JavaScript错误
>编译ES6 => ES6与Babel(WORKING ON)
>缩小所有资产(WORKING ON)
>将index.html,style.css和图像部署到S3(WORKING ON)
>查看文件,当.scss或.html更改时,重新加载浏览器
问题
试图缩小我的Javascript并创建一个scripts.min.js
文件,它会为每个新的最小化的JavaScript添加后缀最小值
文件.
文件夹结构
index.html gulpfile.js package.json .aws.json .csscomb.json .gitignore assets - css style.css style.scss --partials ---base ---components ---modules - img - js scripts.js - dist
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 plumber = require('gulp-plumber'); var rename = require('gulp-rename'); var rucksack = require("rucksack-css"); var sass = require('gulp-sass'); var uglify = require('gulp-uglify'); // 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,lost,rucksack ]; gulp.src(['assets/css/**/*.scss']) .pipe(plumber({ errorHandler: function (error) { console.log(error.message); this.emit('end'); }})) .pipe(sass()) .pipe(postcss(processors)) // .pipe(gulp.dest('assets/css/')) // .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('assets/css/')) .pipe(browserSync.reload({stream:true})) }); // Show any JavaScript errors gulp.task('scripts',function(){ return gulp.src('assets/js/**/*.js') .pipe(plumber({ errorHandler: function (error) { console.log(error.message); this.emit('end'); }})) .pipe(jshint()) .pipe(jshint.reporter('default')) // .pipe(concat('main.js')) // .pipe(babel()) .pipe(gulp.dest('assets/js/')) .pipe(uglify()) .pipe(gulp.dest('assets/js/')) .pipe(rename({suffix: '.min'})) .pipe(browserSync.reload({stream:true})) }); // Minify assets,create build folder gulp.task('images',function(){ gulp.src('assets/img/**/*') .pipe(cache(imagemin({ optimizationLevel: 3,progressive: true,interlaced: true }))) .pipe(gulp.dest('assets/img')); }); // Minify HTML // Default task gulp.task('default',['browser-sync'],function(){ gulp.watch("assets/css/**/*.scss",['styles']); gulp.watch("assets/js/**/*.js",['scripts']); gulp.watch("*.html",['bs-reload']); gulp.start("images","styles","scripts") }); // var babel = require('gulp-babel'); // var minifyhtml = require("gulp-minify-html"); // var size = require("gulp-size"); // var upload = require("gulp-s3");