javascript 我的gulpfile.js在我的项目中使用

Posted 2021-05-04

'use strict';
// Include gulp
var gulp          = require("gulp");
var sass          = require("gulp-sass");
var newer         = require('gulp-newer');
var imagemin      = require('gulp-imagemin');
var sourcemaps    = require('gulp-sourcemaps');
var concat        = require('gulp-concat');
var uglify        = require('gulp-uglify');
var rename        = require("gulp-rename");
var del           = require('del');

//PostCss
var postcss       = require('gulp-postcss');
var autoprefixer  = require('autoprefixer');
var pxtorem       = require('postcss-pxtorem');
var pixrem        = require('pixrem');
var rgba_fallback = require('postcss-color-rgba-fallback');
var resp_images   = require('postcss-responsive-images');
var click         = require('postcss-click');
var mqpacker      = require('css-mqpacker');
var cssnano       = require('cssnano');

var notify        = require('gulp-notify');
var watch         = require('gulp-watch');
var connectPHP    = require('gulp-connect-php');
var browserSync   = require('browser-sync').create();
var reload        = browserSync.reload;

//Paths
var paths = {
   html: '*.html',
   // Uncomment if work with php
   // html: '*.php',

   //source
   scss: 'src/scss/**/*.scss',
   srcjs: 'src/js/**/*.js',
   srcimg: 'src/images/**/*',

   //production
   css: 'css/',
   script: 'js/',
   images: 'images/'
};

var sassOptions = {
   errLogToConsole: true,
   outputStyle: 'expanded',
   indentType: 'space',
   indentWidth: '3',
   sourceMap: true,
   sourceComments: true
};

// HTML
gulp.task('html', function() {
   return gulp.src(paths.html)
   .pipe(reload({stream:true}))
   .pipe(notify({ message: 'File changed! Reloading...', title: 'HTML' }));
});

// SCSS/CSS processing
gulp.task('sass', ['imagemin'], function() {
   var postCssOpts = [
      autoprefixer({
         browsers: ['last 3 version', '> 5%', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
      }),
      mqpacker,
      pxtorem({
         rootValue: 16,
         unitPrecision: 4,
         propWhiteList: ['font', 'font-size', 'line-height', 'letter-spacing'],
         selectorBlackList: [/^html$/, /^body$/],
         replace: false,
         mediaQuery: true,
         minPixelValue: 0
      }),
      pixrem({
         rootValue: 16,
         replace: false,
         atrules: true,
         html: true,
         browsers: 'ie <= 9',
         unitPrecision: 4
      }),
      rgba_fallback,
      resp_images
   ];
   gulp.src(paths.scss)
   .pipe(sourcemaps.init())
   .pipe(sass(sassOptions).on('error', sass.logError))
   .pipe(postcss(postCssOpts))
   .pipe(sourcemaps.write('.'))
   .pipe(gulp.dest(paths.css))
   .pipe(notify({ message: 'Gulp task complete', title: 'SCSS', "onLast": true }))
   /* Reload the browser CSS after every change */
   .pipe(reload({stream:true}));
});


// Css Minify & Rename
gulp.task('cssnano', function () {
   return gulp.src(paths.css + 'main.css')
   .pipe(postcss([cssnano]))
   //.pipe(cssnano({autoprefixer: false}))
   .pipe(rename({suffix: '.min'}))
   .pipe(gulp.dest(paths.css))
   .pipe(notify({ message: 'CSS Minified!', title: 'CSS-NANO' }));
});


// JavaScript processing
gulp.task('scripts', function() {
   return gulp.src(paths.srcjs)
   .pipe(concat('main.js'))
   .pipe(gulp.dest(paths.script))
   .pipe(rename({suffix: '.min'}))
   .pipe(uglify())
   .pipe(gulp.dest(paths.script))
   .pipe(notify({ message: 'Gulp task complete', title: 'SCRIPTS', "onLast": true }))
   .pipe(reload({stream:true}));
});


// image processing
gulp.task('imagemin', function() {
   return gulp.src(paths.srcimg)
   .pipe(newer(paths.images))
   .pipe(imagemin({
      optimizationLevel: 4,
      progressive: true,
      interlaced: true
   }))
   .pipe(gulp.dest(paths.images))
   .pipe(notify({ message: 'Gulp task complete', title: 'ImageMin', "onLast": true }));
});


// Watch Files For Changes
gulp.task('watcher', function() {
   gulp.watch(paths.scss, ['sass']);
   gulp.watch(paths.html, ['html']).on('change', browserSync.reload);
});


// BrowserSync
gulp.task('browserSync', function() {
   browserSync.init(["css/*.css", paths.html], {
      proxy: 'flex.loc',
      port: 8080,
      //files: ['*.php', '*.html', 'src/scss/**/*.scss', 'css/*.css'],
      open: 'external',
      ghostMode: true,
      logPrefix: 'flex.loc'
      //browser: ['google chrome', 'firefox']
   });

});

gulp.task('default', ['sass', 'browserSync'], function () {
    gulp.watch(paths.scss, ['sass', 'cssnano']);
    gulp.watch(paths.srcjs, ['scripts']);
    gulp.watch(paths.html, ['html']).on('change', browserSync.reload);
});