正文 

当前位置： 首页 > java > java教程

javascriptgulp文件引导程序(代码片段)

author author     2022-12-06     773

关键词： 

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'));
);
*/

javascriptgulp-示例文件(代码片段)

查看详情

javascriptgulp文件新(代码片段)

查看详情

javascriptgulp文件优化js，css和图像(代码片段)

查看详情

javascriptgulp任务解决shopify中导入sass文件的问题(代码片段)

查看详情

javascriptgulp(代码片段)

查看详情

javascriptgulp+browsersync(代码片段)

查看详情

javascriptgulp编译typescript(代码片段)

查看详情

javascriptgulp：简单的scss处理(代码片段)

查看详情

javascriptgulp.js工作流程(代码片段)

查看详情

javascriptgulp4示例gulpfile.js(代码片段)

查看详情

javascriptgulp4-具有外部配置的多文件任务。使用gulp-load-plugins的基本gulpfile模板，用于多个任务文件(代码片段)

查看详情

javascriptgulp＃4.0：简单的gulpfile.js集合(代码片段)

查看详情

javascriptgulp：在浏览器同步中使用ngrok(代码片段)

查看详情

javascriptgulp，scss，es6，babel，browserify(代码片段)

查看详情

javascriptgulp4配置sass，postcss，autoprefixer，cssnano，sourcemaps(代码片段)

查看详情

htmlbootstrap模板：取决于本地引导程序css文件。(代码片段)

查看详情

第5课-主引导程序的扩展（下）(代码片段)

第5课-主引导程序的扩展（下）1.在FAT12根目录中查找目标文件　　在前面课程的学习中，我们知道主引导程序有一个512字节的限制，如何突破这种限制呢？我们想到的办法是：再写一个程序(LOADER)放到存储介质中，在主引导程序... 查看详情

php用于web应用程序/脚本的php引导程序文件。设置简单启动的默认值(代码片段)

查看详情