gulp笔记

容易安装失败，原因不明，注意事项
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/'))
});