gulp是什么
gulp是一个前端构建工具，通过脚本实现文件图片的压缩，gulp功能的实现依赖于插件，所以想使用什么功能，得先安装对应的插件
gulp的安装、使用
1.安装node环境
2.全局安装gulp： <b> 以下的斜体表示在cmd的命令</b><i>npm install -g gulp</i>
3.在需要使用gulp的项目中单独安装一次gulp（方便单独操作各个项目），同时安装所需要的插件 <i>npm install gulp gulp-uglify</i> 这里是以安装插件gulp-uglify为例
4.在项目根目录下创建gulpfile.js文件，在文件中定义需要完成的任务
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('default', function(){
gulp.src('main.js')
.pipe(uglify())
.pipe(gulp.dest('dist/'));
});
5.切换到gulpfile.js所在的文件下，运行gulp任务。 <i>gulp</i>，注：如果gulp命令后没有加任务名，则执行默认任务，如果添加了任务名则 执行指定的任务。
gulp的常用方法
- gulp.src(path):指定要操作的文件（以流的形式读取出来）。
- 参数是要读取文件的路径
- 如果要匹配多个文件路径，可以使用数组结构。
- gulp.task(name,function)：
- name：任务名，如果没有指定任务名，默认是default。
- function：任务所对应的实现函数。
注：如果需要按某个顺序执行多个任务，可以在中间插入第二个参数：依赖任务
gulp.task('default',['one','two','three']);//只要执行default任务，就相当于把one，two，three这三个任务执行了
- gulp.dest(path)：把文件流写入到指定位置
- 参数是要写入的路径（文件名是读取时的名字），如果需要修改写入的文件名，则需要使用插件修改：gulp-rename
gulp的常用插件
- js文件压缩插件
- 安装方法：<i>npm install --save-dev gulp-uglify</i>
- 使用示例:
var gulp = require('gulp'),
uglify = require("gulp-uglify");
gulp.task('minify-js', function () {
gulp.src('js/*.js') // 要压缩的js⽂文件
.pipe(uglify())
.pipe(gulp.dest('dist/js')); //压缩后的路路径
});
- 重命名插件
- 安装方法：<i>npm install --save-dev gulp-rename</i>
- 使用示例:
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require("gulp-uglify");
gulp.task('rename', function () {
gulp.src('js/jquery.js')
.pipe(uglify()) //压缩
.pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
.pipe(gulp.dest('js'));
//关于gulp-rename的更更多强⼤大的⽤用法请参考https://www.npmjs.com/package/gulp-rename
});
- CSS文件压缩插件
- 安装方法：<i>npm install --save-dev gulp-minify-css</i>
- 使用示例:
var gulp = require('gulp'),
minifyCss = require("gulp-minify-
css");
gulp.task('minify-css', function () {
gulp.src('css/*.css') // 要压缩的css⽂文件
.pipe(minifyCss()) //压缩css
.pipe(gulp.dest('dist/css'));
});
- JS 代码语法检查插件
- 安装方法：<i>npm install --save-dev gulp-jshint</i>
- 使用示例:
var gulp = require('gulp'),
jshint = require("gulp-jshint");
gulp.task('jsLint', function () {
gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter()); // 输出检查结果
});
- 文件合并插件
- 安装方法：<i>npm install --save-dev gulp-concat</i>
- 使用示例:
var gulp = require('gulp'),
concat = require("gulp-concat");
gulp.task('concat', function () {
gulp.src('js/*.js') //要合并的⽂文件
.pipe(concat('all.js')) // 合并匹配到的js⽂文件并命名为 "all.js"
.pipe(gulp.dest('dist/js'));
});
- less编译
- 安装方法：<i>npm install --save-dev gulp-less</i>
- 使用示例:
var gulp = require('gulp'),
less = require("gulp-less");
gulp.task('compile-less', function () {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'));
});
