容易安装失败,原因不明,注意事项
1,node装在c盘nodejs根目录,文件夹名字不要空格
2,先装vue-cli再装gulp
0,初始化项目
cnpm init
然后一路回车
1,安装小于4版本的gulp
cnpm install gulp@3 --save-dev
2,自动编译文件
先在根目录下创建一个gulpfile.js
watch下有两个参数,
参数1,被监视的目标文件
参数2,是个数组,文件改变后,要执行的任务列表
gulp.task('watch', function(){
gulp.watch('app/*.scss', ['task1','task2'])
})
3,压缩css
1,安装插件
cnpm install gulp-if gulp-minify-css --save-dev
2,使用
var gulp=require('gulp');
var minifyCSS = require('gulp-minify-css');
gulp.task('kun', function(){
return gulp.src('app/x.css')
.pipe(minifyCSS())
.pipe(gulp.dest('dist'))
});
3,运行命令
gulp kun
4,压缩html
插件:
cnpm install gulp-htmlmin --save-dev
使用
var gulp=require('gulp');
var htmlmin = require('gulp-htmlmin');
gulp.task('kun', function(){
var options = {
collapseWhitespace:true,
collapseBooleanAttributes:true,
removeComments:true,
removeEmptyAttributes:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true,
minifyJS:true,
minifyCSS:true
};
return gulp.src('app/test.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist'))
});
我们看到task里面有个设置选项,分别介绍一下他们的属性的作用:
1.collapseWhitespace:从字面意思应该可以看出来,清除空格,压缩html,这一条比较重要,作用比较大,引起的改变压缩量也特别大;
2.collapseBooleanAttributes:省略布尔属性的值,比如:,那么设置这个属性后,就会变成 ;
3.removeComments:清除html中注释的部分,我们应该减少html页面中的注释。
4.removeEmptyAttributes:清除所有的空属性,
5.removeSciptTypeAttributes:清除所有script标签中的type="text/javascript"属性。
6.removeStyleLinkTypeAttributes:清楚所有Link标签上的type属性。
7.minifyJS:压缩html中的javascript代码。
8.minifyCSS:压缩html中的css代码。
总之,压缩Html的原则就是清除没用的代码,删除本就默认值的属性,将html压缩的最小,这样才能提高项目运行的性能。
5,压缩js
1,安装
cnpm install gulp-uglify --save-dev
2,使用
var gulp=require('gulp');
var jsmin = require('gulp-uglify');
gulp.task('kun', function(){
return gulp.src('app/x.js')
.pipe(jsmin())
.pipe(gulp.dest('dist'))
});
6,批量替换字符串,replace
1,安装
cnpm install gulp-replace --save-dev
2,使用
var gulp=require('gulp');
var replace = require('gulp-replace');
gulp.task('kun', function(){
return gulp.src('app/a.js')
.pipe(replace('@@version@@','1.5'))
.pipe(gulp.dest('dist'))
});
7,为文件添加.min后缀
1,安装
cnpm install gulp-rename --save-dev
2,使用
var gulp=require("gulp");
var rename=require("gulp-rename");
gulp.task('kun', function(){
return gulp.src('app/x.js')
.pipe(rename({
suffix:'.min'
}))
.pipe(gulp.dest('dist'))
});
8,执行多个任务
其实是任务的依赖
gulp.task('default',['task1','task2'],function(){
})
9,清空dist文件夹
1,安装
cnpm install gulp-clean --save-dev
2,使用
var gulp=require('gulp');
var clean = require('gulp-clean');
// 清空目录
gulp.task('del', function(){
return gulp.src('./dist/*')
.pipe(clean())
});
10,复制文件夹内的文件
这个不需要安装插件
// 复制目录
gulp.task('mv', function(){
gulp.src('./src/*/*')
.pipe(gulp.dest('./dist/'))
return gulp.src('./app/img/*')
.pipe(gulp.dest('./dist/img/'))
});