通过Gulp添加Modernizr.js

时间:2018-07-17 09:16:42

标签: javascript gulp modernizr

我有这样的gulpfile.js:

'use strict';

let gulp = require('gulp'),
    watch = require('gulp-watch'),
    autoprefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    cleanCSS = require('gulp-clean-css'),
    imagemin = require('gulp-imagemin'),
    browserSync = require('browser-sync'),
    modernizr = require('gulp-modernizr'),
    concat = require('gulp-concat'),
    reload = browserSync.reload;

let path = {
    dist: {
        html: 'dist/',
        css: 'dist/css/',
        js: 'dist/js/',
        img: 'dist/img/',
        fonts: 'dist/fonts/',
    },
    app: {
        html: 'app/*.html',
        style: 'app/scss/*.scss',
        js: 'app/js/*.js',
        img: 'app/img/**/*.*',
        fonts: 'app/fonts/**/*.*',
    },
    watch: {
        html: 'app/**/*.html',
        style: 'app/scss/**/**/*.scss',
        js: 'app/js/**/*.js',
        img: 'app/img/**/*.*',
        fonts: 'app/fonts/**/*.*',
    }
};

let config = {
    server: {
        baseDir: './dist'
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: 'webmaster-cube'
};

gulp.task('webserver', function () {
   browserSync(config);
});

gulp.task('html:dist', function () {
        return gulp.src(path.app.html)
            .pipe(gulp.dest(path.dist.html)).pipe(reload({stream: true}));
});

gulp.task('js:dist', function () {
    return gulp.src(path.app.js)
        .pipe(sourcemaps.init()).pipe(concat('all.js')).pipe(uglify()).pipe(sourcemaps.write()).pipe(gulp.dest(path.dist.js)).pipe(reload({stream: true}));
        //.pipe(sourcemaps.init()).pipe(modernizr()).pipe(concat('all.js')).pipe(uglify()).pipe(sourcemaps.write()).pipe(gulp.dest(path.dist.js)).pipe(reload({stream: true}));
});

gulp.task('style:dist', function () {
    return gulp.src(path.app.style)
        .pipe(sourcemaps.init()).pipe(sass().on('error', sass.logError)).pipe(sourcemaps.write()).pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false, grid: true})).pipe(gulp.dest(path.dist.css)).pipe(reload({stream: true}));
        //.pipe(sourcemaps.init()).pipe(sass().on('error', sass.logError)).pipe(sourcemaps.write()).pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false, grid: true})).pipe(cleanCSS({debug: true}, (details) => { console.log(`${details.name}: ${details.stats.originalSize}`); console.log(`${details.name}: ${details.stats.minifiedSize}`); })).pipe(gulp.dest(path.dist.css)).pipe(reload({stream: true}));
});

gulp.task('image:dist', function () {
    return gulp.src(path.app.img)
        .pipe(imagemin({progressive: true, svgoPlugins: [{removeViewBox: false}], optimizationLevel: 5, interlaced: true})).pipe(gulp.dest(path.dist.img)).pipe(reload({stream: true}));
});

gulp.task('fonts:dist', function () {
    return gulp.src(path.app.fonts)
        .pipe(gulp.dest(path.dist.fonts));
});

gulp.task('dist', [
    'html:dist',
    'js:dist',
    'style:dist',
    'fonts:dist',
    'image:dist'
    ]
);

gulp.task('watch', function(){
   watch([path.watch.html], function (event, cb) {
       gulp.start('html:dist');
   });
   watch([path.watch.style], function (event, cb) {
        gulp.start('style:dist');
   });
   watch([path.watch.js], function (event, cb) {
        gulp.start('js:dist');
   });
   watch([path.watch.img], function (event, cb) {
        gulp.start('image:dist');
   });
   watch([path.watch.fonts], function (event, cb) {
        gulp.start('fonts:dist');
   });
});

gulp.task('default', ['dist', 'webserver', 'watch']);

但是我不知道将gulp-modernizr插件添加modernizr.js到我的项目中。当我添加.pipe(modernizr())到.pipe(sourcemaps.init())。pipe(concat('all.js'))。pipe(uglify())。pipe(sourcemaps.write())时。 pipe(gulp.dest(path.dist.js))。pipe(reload({stream:true})); 我只用了modernizr.js代码就得到了all.js。

感谢您的帮助。

0 个答案:

没有答案