正文

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

author  author  2022-12-07  372

关键词：

npm install gulp-concat gulp-uglify gulp-strip-debug gulp-autoprefixer gulp-minify-css gulp-changed gulp-imagemin gulp-jshint --save-dev

// include gulp
var gulp = require('gulp'); 
//jshint
var jshint = require('gulp-jshint');
var changed = require('gulp-changed');
//imgs
var imagemin = require('gulp-imagemin');
var minifyHTML = require('gulp-minify-html');
// js files
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
// css files
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');

// JS hint task
gulp.task('jshint', function() 
  gulp.src('./src/scripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
);

// minify new images
gulp.task('imagemin', function() 
  var imgSrc = './src/images/**/*',
      imgDst = './build/images';

  gulp.src(imgSrc)
    .pipe(changed(imgDst))
    .pipe(imagemin())
    .pipe(gulp.dest(imgDst));
);

  // minify new or changed HTML pages
gulp.task('htmlpage', function() 
  var htmlSrc = './src/*.html',
      htmlDst = './build';

  gulp.src(htmlSrc)
    .pipe(changed(htmlDst))
    .pipe(minifyHTML())
    .pipe(gulp.dest(htmlDst));
);

// JS concat, strip debugging and minify
gulp.task('scripts', function() 
  gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/scripts/'));
);

// CSS concat, auto-prefix and minify
gulp.task('styles', function() 
  gulp.src(['./src/styles/*.css'])
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./build/styles/'));
);


// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() 
  // watch for HTML changes
  gulp.watch('./src/*.html', function() 
    gulp.run('htmlpage');
  );

  // watch for JS changes
  gulp.watch('./src/scripts/*.js', function() 
    gulp.run('jshint', 'scripts');
  );

  // watch for CSS changes
  gulp.watch('./src/styles/*.css', function() 
    gulp.run('styles');
  );
);

前端知识总结--性能优化

...输优化和页面内容优化，网络方面1、减少http请求合并js文件合并css文件雪碧图的使用(csssprite)使用base64表示简单的图片2、减小资源体积gzip压缩js混淆css压缩图片压缩3、使用缓存DNS缓存CDN部署与缓存http缓存页面方面1、优化网页... 查看详情

合并和缩小多个 CSS / JS 文件

】合并和缩小多个CSS/JS文件【英文标题】：CombineandMinifyMultipleCSS/JSFiles【发布时间】：2012-03-0611:11:45【问题描述】：我正在尝试通过合并和压缩CSS和JS文件来优化网站性能。我的问题更多是关于如何实现这一目标的（具体）步骤... 查看详情

站点优化

...http的请求尽量将同一个逻辑的css代码和js代码放到同一个文件中，这样也能够减少http的请求可以将图片和js，css等静态资源文件通过CDN缓存来减少HTTP的请求优化每一次http请求资源的大小IIS会默认开启GZip的静态资源压缩尽量在不... 查看详情

面试：提升页面性能优化的方法有哪些？

...源压缩合并，减少http请求（html压缩，css压缩，js压缩，文件-公共库合并）合并图片（csssprites）、CSS和JS文件合并、CSS和JS文件压缩图片较多的页面也可以使用lazyLoad等技术进行优化。精灵图等 2. 非核心代码异步加载-... 查看详情

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

查看详情

前端性能优化汇总

...、减少请求资源大小或者次数　1、尽量和并和压缩css和js文件。（将css文件和并为一个。将js合并为一个）　　原因：主要是为了减少http请求次数以及减少请求资源的大小　　打包工具：　　webpack　　gulp　　grunt.　　....2、尽... 查看详情

用于连接 JS 和 CSS 文件的工具

】用于连接JS和CSS文件的工具【英文标题】：ToolsforJSandCSSfileconcatenating【发布时间】：2012-07-1110:31:36【问题描述】：我最近开始使用大型代码库，每页有许多(15-20)个js请求。我的任务是优化和提高这些站点的性能。我一直在使用G... 查看详情

前端优化

...配选择器。缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等请求数量：合并样式和脚本，使用css图片精灵(sprite)，初始首屏之外的图片资源按需加载，静态资源延迟加载(... 查看详情

如何对网站的文件和资源进行优化

1、文件合并（目的是减少http请求）2、文件压缩（目的是直接减少文件下载的体积）3、使用cdn托管资源4、使用缓存5、gizp压缩你的js和css文件6、meta标签优化（title,description,keywords）、heading标签的优化、alt优化7、反向链接，网站... 查看详情

网站优化提高访问速度的14个方法

...7.避免使用CSS中的Expressions[css]8.将JavaScript和CSS独立成外部文件[javascript][css]9.减少DNS查询[content]10.压缩JavaScript和CSS(包括内联的)[javascript][css]11.避免重定向[server]12.移除重复的脚本[javascript]13.配置实体标签（ETags）[css]14.使AJAX缓存... 查看详情

性能优化:css和js的装载与执行(一个网站在浏览器端,是如何进行渲染的css+js渲染过程中的性能优化点)(代码片段)

本文主要介绍了"前端性能优化"CSS和JS在浏览器端可进行性能优化的点。废话不多说,直接上代码以及图例(为了让大家方便阅读,都有自己验证过程的一些图片作为分享)。性能优化---上篇文章:性能优化:图片的相关优化–优化... 查看详情

正文

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

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

javascriptgulp文件模板(代码片段)

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

javascriptgulp文件新(代码片段)

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

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

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