700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > gulp+babel实现es6压缩 并替换es6语法 压缩html css

gulp+babel实现es6压缩 并替换es6语法 压缩html css

时间:2020-12-01 21:05:31

相关推荐

gulp+babel实现es6压缩 并替换es6语法 压缩html css

1:创建一个文件夹,这里取名为final,要是没有安装过gulp的就先全局安装Gulp包: npm install -g gulp

2;在目录下新建文件夹src,存放源文件。

3:在final文件夹下cmd,输入npm init,初始化npm

这儿出现的信息随便填写,不写直接enter就是用默认值。

出现is this ok,输入y,回车。

生成如下目录结构:

4:在final目录下新增文件:.babelrc(这里我是取消了严格模式)

执行命令npm install babel-plugin-transform-remove-strict-mode -D

5:安装 gulp

命令:npm install gulp --save-dev。

6:安装gulp-babel,babel-core 和babel-preset-es

命令:npm install gulp-babel@7.0.1 babel-core babel-preset-es --save-dev

注意:gulp-babel版本最好不要超过8.0.0,否则可能出现Plugin/Preset files are not allowed to export objects的问题。

成功之后会在根目录下看到node模块文件夹

7:下载(重命名与压缩插件)npm install gulp-rename gulp-uglify

8:在final文件夹下新建gulpfile.js文件。

内容如下:

这里任务名为minjs,gulp.src('./src/*.js')表示的是源代码路径,.pipe(gulp.dest('./src/'))代表新文件生成的路径。

.pipe(rename(function(file){ 是新生成的文件的文件名规则,官方教程:/package/gulp-rename

输入gulp minjs执行:

生成结果:

二:压缩html,这里我只是处理了html标签的换行与空格。

1:gulp-htmlmin这是一款HTML文件压缩插件, 通过命令npm install --save-dev gulp-htmlmin下载,官网:/package/gulp-htmlmin

2:创建gulp任务:

若需要去除html中注释的内容则在collapseWhitespace: true后面添加:removeComments: true,需要注意的是,压缩后组件上的大写变量名会变成小写,需要大小写敏感加上caseSensitive:true即可,多个属性之间,号分隔。

参考网址:/kangax/html-minifier

3:压缩,输入命令,gulp htmlmin。

三:压缩css

1:下载gulp-minify-css,命令npm install gulp-minify-css --save-dev

2:创建gulp任务:

const minifycss = require("gulp-minify-css");//压缩cssgulp.task('cssTask', function () {return gulp.src("./src/*.css").pipe(minifycss({advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]keepBreaks: false,//是否保留换行,默认falsekeepSpecialComments: '*'//保留所有特殊前缀})).pipe(gulp.dest('./dist/'))});

3:压缩,输入命令gulp cssTask。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。