目前做代码压缩合并的工具有很多，诸如gulp，webpack，grunt等等，可以说这些项目构建工具的功能非常之强大：图片压缩、图片转base64、css和js的压缩以及合并，文件的md5重命名 ……。...--save-dev //- gulp插件的核心 npm install gulp-minify-css --save-dev //- 压缩CSS文件 npm install gulp-rev...目前index.html文件中的css和js的引用路径是这样的，如下图： ? 其他目录下的html文件也是这样的，都引用的是未压缩和md5命名的css和js文件。...gulp.src(['webContent/css/**/*.css']) //- 需要处理的css文件，放到一个字符串数组里 // .pipe(concat('css...所有的css和js文件都加了md5命名了，所有的图片体积也小了，但用肉眼看不出来图片质量有变化。 此时dist目录下所有的html文件引用的css和js的引用路径都变成带有md5命名的了。
基于环境的捆绑和缩小 从 Gulp 使用 bundleconfig.json 手动转换捆绑和缩小工作流以使用 Gulp 运行 Gulp 任务 其他资源 参考资料 最近在B站上看到杨旭老师的 ASP.NET...function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))}; 除了删除注释和不必要的空格外，还进行了以下参数和变量名称重命名...： 原始 重命名 imageTagAndImageID t imageContext a imageElement r 捆绑和缩小的影响 操作 使用捆绑/缩小 不使用捆绑/缩小 更改 文件请求 7 18.../site.min.css" asp-append-version="true" /> 从 Gulp 使用 bundleconfig.json 在某些情况下，应用的捆绑和缩小工作流需要额外处理...为了满足这些要求，可以将捆绑和缩小工作流转换为使用 Gulp。
本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。安装 gulp在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。...') .pipe(browserSync.stream());}// CSS 任务function css() { return gulp.src('css/main.css') .pipe...); gulp.watch('index.html', gulp.series("html")); gulp.watch('css/main.css', gulp.series("css"));...gulp.watch('js/main.js', gulp.series("js"));});// 默认任务gulp.task('default', gulp.series('html', 'css'...您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。
使用 Gulp能够替你自动执行这些任务。 为了能够使用Gulp，我们必须将它作为依赖添加到项目当中。 这项工作是在 package.json文件中完成的，它负责跟踪项目依赖及其版本。...全局安装gulp： ? 安装 gulp 和 gulp-autoprefixer 作为项目依赖项： ? 它们将会出现在 package.json文件中的 devDependencies下。...gulp会从 styles.css中提取内容并通过 gulp-autoprefixer传递它。 处理结果会保存在build文件夹下。.../CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax) Gulp (https://gulpjs.com.../) Gulp Autoprefixer (https://www.npmjs.com/package/gulp-autoprefixer)
运行npm run build，同时将项目编译到一个dist文件夹中，可以在其中找到JavaScript和CSS文件，我们会发现这两个文件似乎都缩小了。...当我们把文件重命名并添加一些TypeScript特定的语法后，所有文件都可以更好的进行编译。 使用CSS时，有人会将其重命名为CSSstyle.scss，并添加一些特定于Sass的语法。...运行npm install sass --save-dev并重新启动观察程序后，就可以使用Sass满足我们的需求了。...开发人员经验 在以往的开发经验中，无论我们使用的是Grunt，Gulp，Rollup还是Webpack，这种大型复杂的项目都会花费不短的时间来调试并确保所有工具和插件都能正常运行。...而如果我们要避免使用框架，但又需要缩小脚本和样式，Vite将会成为首选工具。
/dist'); // 删除整个dist文件夹 gulp-rename 描述：重命名文件。.../css/*.css') .pipe(csso()) .pipe(gulp.dest('./dist/css')) gulp-html-minify 描述：压缩HTML。.../dist')) JS/CSS自动注入 gulp-autoprefixer 描述：自动为css添加浏览器前缀。.../css/*.css') .pipe(rev()) .pipe(gulp.dest('..../dist/css')) gulp-rev-replace 描述：重写被gulp-rev重命名的文件名。
（如第五步配置完成，此步忽略） npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint...2 * gulp 3 * $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint...gulp-minify-css'),//压缩css为min 10 spriter = require('gulp-css-spriter'),//图片合并css精灵 11 jshint...('gulp-imagemin'),//压缩图片 14 rename = require('gulp-rename'),//重命名gulp 15 concat = require('gulp-concat...android >= 4.4','bb >= 10','and_uc 9.9']}))//支持浏览器种类 26 .pipe(rename({ suffix: '.min' }))//重命名加
/dist/css/'))) }); 另一种是国内以cssgaga、gulp-tmtsprite 为代表的，在开发阶段是写单个小图的CSS 样式，然后也是通过构建工具的注册任务进行合并产生雪碧图的插件...= require('postcss-lazysprite'); gulp.task('css', function () { return gulp.src('....nameSpace：CSS 的命名空间。 注意下你的gulp css任务一般是gulp.watch以及默认任务的一部分。.../dist/slice'定义的目录下的子目录，这个目录下的所有雪碧图小图会合成为一张雪碧图，图片名称默认是以filetype.png命名。...同时filetype也会作为生成的小图对应CSS class 的一部分。CSS class 的构成即是“命名空间+目录名+小图片名”。
，在合并后进行压缩，在合并的文件common.js若再次更改，则继续压缩 执行.pipe(uglify()） 随后在cmd命令行输入 gulp watchall 进行监听 ⑤ 重命名（js文件） 使用...命令行输入** gulp watchall ⑥ 压缩css 使用Gulp-minify-css 插件 在cmd命令行中输入 npm install gulp-minify-css –save-dev...//安装Gulp-minify-css 插件 待安装成功后在gulpfile.js的文件中输入const minifycss = require(“gulp-minify-css”) （继续在重命名...js文件下添加） 后继续在gulpfile.js的文件中输入如下所示 （接着上面的重命名js） 随后再次启动监听 在cmd命令行输入** gulp watchall ，后检验在发布目录中的...css压缩文件。
= require('gulp-browserify'); //编译commonJs语法的工具 const rename = require("gulp-rename"); //重命名文件的包...gulp.src('build/js/app.js') .pipe(browserify()) // 重命名文件 .pipe(rename("built.js")) ....')) }) // 将less编译成css gulp.task('less', function () { return gulp.src('..../build/css')) .pipe(livereload()); }); // 压缩css gulp.task('css', function () { return gulp.src...')); // 生产环境的指令: gulp prod gulp.task('prod', gulp.parallel('js-prod', 'css', 'html')); // 开发环境的指令： gulp
自动化构建工具 自动化构建工具：webpack、gulp、grunt都可以实现css3属性前缀的自动化添加。在此我只演示一下gulp的应用。...# 安装gulp-autoprefixer插件（为css3属性添加前缀） $ npm i -S gulp-rename # gulp的重命名插件 第四步：在项目根目录下创建一个名为 gulpfile.js...gulp插件 rename = require("gulp-rename"); // 引用重命名的gulp插件 gulp.task('t1', function () { gulp.src(..., // 添加后缀 extname: ".css" // 文件扩展名 })) .pipe(gulp.dest('....gulp 在线文档：地址 5. sass、less等预处理语言 sass和less等css的预处理语言配合响应的编译工具也可以实现对css3中的新属性的自动化加前缀处理。
，依次新建images、css、js等文件夹分别放对应的静态文件，新建index.html 开始码HTML+CSS+JS 代码，改动一下按一下F5(或CTRL+R)刷新浏览器。...Sass（gulp-sass） Sass 是与 Less 并举的 CSS 预处理器，一种全新的CSS 编码方式。...文件清理功能（gulp-clean） 在项目完成可以删除一些多余的文件 任务错误中断自动重传（gulp-plumber） 好吧，“任务错误中断自动重传”是我瞎命名的。...自动打包并按时间重命名（gulp-zip） 一般项目完成后需要整理文件并压缩以供交付使用或进行下一阶段的开发，本模块可以实现将项目文件自动打包并按时间重命名。...其他（gulp-copy、gulp-rename、opn） 其他杂项模块为该Gulp 添加文件复制、文件重命名、浏览器自动打开项目目录等基础功能 注： 1.因为CSS 代码主要是通过Compass 框架完成
我们单独写一份样式表（css 文件 深空蓝.css），以一个特定的命名开头（比如 .blue-theme），然后在这个 css 文件中，完成我们第二套皮肤的样式代码，然后当我们点击换肤的时候，就将 blue-theme...） 现在摆在眼前的一个需要解决的问题是：这个 css 文件加命名空间怎么加？...image.png 我们看一下这个工具生成的，或者 配置页面 导出的这个 css 文件，混淆压缩的代码，手动给每一个样式外面包裹一个 class 来做命名空间是不现实的，所以这里要用到一个 gulp 插件...path') var gulp = require('gulp') var cleanCSS = require('gulp-clean-css') var cssWrap = require('gulp-css-wrap...('dist')) }) 然后运行 gulp 这样就得到了一个以 .theme-summer 为命名空间的自定义主题了。
压缩css npm install gulp-cssnano --save -dev 在本地项目安装gulp-cssnano 新建一个css文件夹，在新建index.css *{ margin...var cssnano = require('gulp-cssnano'); // 定义一个处理css文件改动的任务 gulp.task('css',function(){ gulp.src.../css/*.css') .pipe(cssnano()) .pipe(gulp.dest("..../dist/css/")) }); 新建dist文件夹来存放生成的css任务 执行 gulp css ?.../dist/css/")) }); 执行 gulp css，这样将index.css命名为index.min.css ?
Gulp预处理 在Gulp中，我们可以将Sass编译成CSS，使用一个叫做gulp-sass的插件。...('gulp-sass'); 我们可以使用gulp-sass通过将aGulpPlugin()替换成sass(),因为任务用来将Sass编译成CSS，所以让我们将他命名为'sass' gulp.task(...这个文件将会被加入到sass任务中的gulp.src中。 我们想输出最后的styles.css文件到app/css文件夹，我们就要将其加入到gulp.dest的destination处。...既然我们已经监视了.scss文件，并重新加载，为什么不更进一步，当HTML文件和JavaScript文件保存后，重新加载浏览器呢？...--build:css css/styles.min.css--> <link rel="stylesheet
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程：文件流--文件流--文件流......因为grunt操作会创建临时文件，会有频繁的IO操作，而gulp使用的是流操作...description": "Gul pcourse by link", "main": "app.js", "dependencies": { "express": "^4.13.4", "gulp-minify-css...// 本地使用gulp npm install --save gulp-imagemin // 压缩图片 npm install --save gulp-minify-css //压缩css npm...//js压缩 npm install --save gulp-concat //文件合并 npm install --save gulp-rename //文件重命名 npm install --save...q=gulp
Grunt和Gulp是Javascript世界里的用来做自动压缩、Typescript编译、代码质量lint工具、css预处理器的构建工具，它帮助开发者处理客户端开发中的一些烦操重复性的工作。...grunt-contrib-jshint:一个审查代码质量的任务 grunt-contrib-concat:一个连接多文件在一个文件中的任务 grunt-contrib-uglify:一个压缩和缩小文件尺寸的任务...右击Typescript目录，点击”添加->新项目”选择Javascript项目命名为Tastes.ts（注意ts后缀），拷贝下列代码 enum Tastes { Sweet, Sour, Salty..., Bitter } 在Typescript目录中添加第二个文件命名为Food.ts，拷贝以下代码 class Food { constructor(name: string, calories...示例的不同 取代gruntfile.js，添加一个命名为gulpfile.js的文件，在这个文件中，使用node.js的方法require()为下文中的几个变量赋值 var gulp = require
使用gulp能完成以下任务： 压缩html、css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程： 开发->分析->测试->编译->发布部署...var uglify = require('gulp-uglify'); //压缩css var minifyCss = require('gulp-minify-css'); //压缩html var...minifyHtml = require('gulp-minify-html'); //项目中需要将.less文件重命名为.css var rename = require('gulp-rename...需要从bower_components文件夹中就项目实际使用的js和css文件复制发布文件夹中。.../dist/select.min.css', 'app/assets/bower_components/toastr/toastr.min.css', 'app/assets
，如果我们要使用的插件非常多，那我们的gulpfile.js文件开头可能就会是这个样子的： var gulp = require('gulp'), //一些gulp插件,abcd这些命名只是用来举个例子...-前缀，之后再转换为驼峰命名。...4.2 重命名 使用gulp-rename 安装：npm install --save-dev gulp-rename 用来重命名文件流中的文件。...--save-dev gulp-minify-css 要压缩css文件时可以使用该插件 var gulp = require('gulp'), minifyCss = require("gulp-minify-css..."); gulp.task('minify-css', function () { gulp.src('css/*.css') // 要压缩的css文件 .pipe(minifyCss
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
