javascript Gulp文件引导程序

Posted 2021-05-03

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');

// Compile sass & inject into browserSync
gulp.task('sass', function(){
  return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
});

// Move JS files to src/js
gulp.task('js', function(){
  return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js','node_modules/jquery/dist/jquery.min.js','node_modules/popper.js/dist/umd/popper.min.js'])
    .pipe(gulp.dest("src/js"))
    .pipe(browserSync.stream());
});

// Watch sass & server
gulp.task('serve', ['sass'], function(){
  browserSync.init({
    server: "./src"
  });

  gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
  gulp.watch("src/*.html").on('change', browserSync.reload);
});

// Move Fonts Folder to src/fonts
gulp.task('fonts', function(){
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest("src/fonts"));
});

// Move Font Awesome CSS to src/css
gulp.task('fa', function(){
  return gulp.src('node_modules/font-awesome/css/font-awesome.min.css')
    .pipe(gulp.dest("src/css"));
});

gulp.task('default', ['js', 'serve', 'fa', 'fonts']);

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const imagemin = require('gulp-imagemin');
const tinypng = require('gulp-tinypng-compress');
const tiny = require('gulp-tinypng-nokey');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const htmlmin = require('gulp-html-minifier');

/*
  -- TOP LEVEL FUNCTIONS --
  gulp.task - Define tasks
  gulp.src - Point to files to use
  gulp.dest - Points to folder to output
  gulp.watch - Watch files and folders for changes
*/

// Compile sass & inject into browserSync
gulp.task('sass', function(){
  return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
});

// Move Asset JS files to src/assets
gulp.task('js', function(){
  return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js','node_modules/jquery/dist/jquery.min.js','node_modules/popper.js/dist/umd/popper.min.js'])
    .pipe(gulp.dest("src/assets"))
    .pipe(browserSync.stream());
});

// Move Lazy Sizes JS files to src/js
gulp.task('lazySizes', function(){
  return gulp.src(['node_modules/lazysizes/lazysizes.js', 'node_modules/lazysizes/plugins/bgset/ls.bgset.js'])
    .pipe(gulp.dest("src/js"))
});

// Watch sass & server
gulp.task('serve', ['sass'], function(){
  browserSync.init({
    server: "./dist"
  });

  gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
  gulp.watch("dist/*.html").on('change', browserSync.reload);
  gulp.watch('src/js/*.js', ['scripts']);
  gulp.watch('src/img/*.{png,jpg,jpeg}', ['tinypng']);
  gulp.watch('src/img/*', ['imageMin']);
  gulp.watch('src/*.html', ['minifyHtml']);
  gulp.watch('src/blog/*.html', ['minifyBlog']);
  gulp.watch('src/css/style.css', ['minify-css']);
});

// Copy All ASSET JS files
gulp.task('copyJs', function(){
  gulp.src('src/assets/*')
      .pipe(gulp.dest('dist/assets'));
});

// Minify CSS
gulp.task('minify-css', () => {
  return gulp.src('src/css/*')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist/css'));
});

// Move Fonts Folder to src/webfonts
gulp.task('copyFonts', function(){
  return gulp.src('src/webfonts/*')
    .pipe(gulp.dest("dist/webfonts"));
});

// Minify HTML
gulp.task('minifyHtml', function() {
  gulp.src('./src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dist'))
});

// Minify Blog HTML
gulp.task('minifyBlog', function() {
  gulp.src('./src/blog/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dist/blog'))
});

// TinyPNG
gulp.task('tinypng', function () {
    gulp.src('src/img/*.{png,jpg,jpeg}')
        .pipe(tinypng({
            key: 'XafGGIV59sJFyFrKNTKVYsNzKE039ofo',
            sigFile: 'src/img/.tinypng-sigs',
            log: true
        }))
        .pipe(gulp.dest('dist/img'));
});

// Optimize Images
gulp.task('imageMin', () =>
	gulp.src(['src/img/*', '!src/img/*.{png,jpg,jpeg}'])
		.pipe(imagemin())
		.pipe(gulp.dest('dist/img'))
);

// Copy Sass to dist
gulp.task('copySass', function(){
  gulp.src('src/sass/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('dist/css'));
});

// Scripts
gulp.task('scripts', function(){
  gulp.src('src/js/*.js')
      .pipe(concat('main.js'))
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));
});

// Gulp Run Tasks
gulp.task('default', ['js', 'serve', 'minifyHtml', 'minifyBlog', 'imageMin', 'tinypng', 'scripts', 'copySass', 'copyFonts', 'minify-css', 'copyJs', 'lazySizes']);

/*

---TinyPNG API---
gulp.task('tinypng', function () {
    gulp.src('src/img/*.{png,jpg,jpeg}')
        .pipe(tinypng({
            key: 'XafGGIV59sJFyFrKNTKVYsNzKE039ofo',
            sigFile: 'src/img/.tinypng-sigs',
            log: true
        }))
        .pipe(gulp.dest('dist/img'));
});

---TinyPNG NO-API---
gulp.task('tinypng', function(cb) {
    gulp.src('src/img/*.{png,jpg,jpeg}')
        .pipe(tiny())
        .pipe(gulp.dest('dist/img'));
});

--- Font Awesome ---
gulp.task('fonts', function(){
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest("src/fonts"));
});

gulp.task('fa', function(){
  return gulp.src('node_modules/font-awesome/css/font-awesome.min.css')
    .pipe(gulp.dest("src/css"));
});

--- Copy All HTML files ---
gulp.task('copyHtml', function(){
  gulp.src('src/*.html')
      .pipe(gulp.dest('dist'));
});
*/