gulp-inline-css html+css转换成行内元素

前端菜鸟一枚

于 2019-07-31 16:23:30 发布

阅读量524

点赞数

CC 4.0 BY-SA版权

分类专栏：其他文章标签： nmp gulp

本文链接：https://blog.youkuaiyun.com/qq_40599116/article/details/97928366

其他专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何通过Gulp这一自动化构建工具，来优化前端开发过程中的重复任务。从Gulp的安装配置，到具体项目的应用，包括了npm安装、Gulp任务定义、CSS内联等步骤，为开发者提供了实用的前端工作流解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装npm
http://nodejs.cn/download/ 下载对应版本安装

2.命令窗口进入对应项目地址
cd /d E:\
cd E:\wamp\www

3.全局安装gulp（项目位置）
npm install gulp -g
安装成功会有版本号提示
4.安装gulp-inline-css
npm install --save-dev gulp-inline-css
安装成功会有版本号提示

5.项目根目录创建gulpfile.js

var gulp = require('gulp'),
    inlineCss = require('gulp-inline-css');
 
gulp.task('default', function() {
    return gulp.src('index3.html')
        .pipe(inlineCss({
            	applyStyleTags: true,
            	applyLinkTags: true,
            	removeStyleTags: true,
            	removeLinkTags: true
        }))
        .pipe(gulp.dest('build/'));
});

default是任务名称，根目录创建build文件，index3.html为根目录文件
6.执行 gulp default（项目目录）
提示成功
备注：提示以下错误时
$ gulp
[23:29:31] Local gulp not found in
[23:29:31] Try running: npm install gulp

解决方法：
第1步：先cd到当前目录中，使用以下命令，回车即可：npm link gulp