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。