gulp的使用（一）

npm安装gulp npm install gulp --save-dev
常用方法
gulp.task(任务名，回调函数)--------定义任务
gulp.src()--------找到需要执行的任务的文件
gulp.dest()------输出文件的目的地，如果某文件夹不存在，将会自动创建它
gulp.pipe()------管道流，接通源头文件与目标文件的输出
gulp.watch()-----监听文件是否发生变化

使用方法

1.通过gulp.src()方法获取到想要处理的文件流
2.把文件流通过pipe方法导入到gulp插件中
3.把经过插件处理后的流通过pipe导入到gulp.dest()中
4.gulp.dest()方法把流中的内容写入到文件中
5.新建gulp.js文件引入gulp-------var gulp = require(‘gulp’)

定义一个简单的hello任务

var gulp = require('gulp');
gulp.task('hello',function(){
	console.log('hello');
});

默认任务

var gulp = require('gulp');
gulp.task('default',function(){
	console.log('default默认执行任务，直接gulp就行');
});

拷贝文件

gulp.task("执行名称", function () {
    gulp.src("src/*.html")  //找到要拷贝的文件，*号代表以html后缀结尾的文件
        .pipe(gulp.dest("dist")); //要拷贝到的文件目录，没有会自动创建
});

JS文件压缩

安装uglify ----------npm install gulp-uglify --save-dev

var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('uglify',function(){
	gulp.src().pipe(uglify()).pipe(gulp.dest());
});

gulp-sass

sass是一种css的开发工具，可以用它来定义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，可以使用最高效的方式，以少量的代码创建复杂的设计。
1.安装插件----npm install gulp-sass --save-dev
2.编写scss文件

@mixin button($backgroundColor){
    font-size:1px;
    padding:0.5px 2px;
    text-decoration: none;
    color:green;
    background-color: $backgroundColor;
}
.button-green{
    @include button(green);
}

3.在gulpfile.js中添加任务

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('test',function(){
    gulp.src('test.scss').pipe(sass()).pipe(gulp.dest('./css'));
});

合并–将多个JS文件合成一个JS文件

1.安装插件—gulp install gulp-concat --save-dev
2.编写gulp任务，将多个JS文件进行合并

var concat = require('gulp-concat');
 // concat()中要指定合并之后的js文件名字
gulp.task('comeOn',function(){
    gulp.src('./testJs/*.js').pipe(concat('all.js')).pipe(gulp.dest('./js'));
})

总结

gulp 是node中的第三方模块

gulp.task(任务名,回调函数)
gulp.src(文件路径) 设置文件的路径
gulp.pipe() 管道方法 将文件流输出到指定的方法中
gulp.dest(路径) 保存处理完成的文件