学习使用gulp

安装gulp

gulp文档

1
$ npm install --global gulp

如果安装不上可以先安装npm国内镜像源(淘宝)

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装好cnpm之后通过cnpm安装gulp
$ cnpm install -g gulp

初始化package.json

初始化 会在当前文件夹下生成一个package.json文件

1
$ npm init

将gulp作为项目依赖

1
$ npm install --save-dev gulp

这个时候打开package.js文件 你会发现里面已经多了gulp

编写gulp任务

这个时候我们就可以在项目根目录下创建一个名为gulpfile.js的文件 任务格式如下

1
2
3
4
5
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});

下面这个gulp任务执行后可以输出 hello gulp

1
2
3
4
5
var gulp = require('gulp');
gulp.task('say', function() {
console.log("hello gulp")
});

执行say任务

1
$ gulp say

下面这个任务可以自动复制文件

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp');
gulp.task('copy', function () {
//gulp.src提取一个文件
gulp.src("src/index.html")
//将文件导入到dist文件夹中
.pipe(gulp.dest("dist/"));
});
gulp.task("dist", function () {
//监听index.html文件 当index.html发生改变时执行copy任务
gulp.watch("src/index.html", ["copy"])
});

执行完后 我们会发现光标一直在闪动 像是没有执行完一样 其实就是因为任务还在监听当中

现在让我们去编辑文件看看有什么变化吧

编写一个将less转成css的任务

gulp-less文档

安装gulp-less插件

1
$ npm install gulp-less --save-dev

编写less>>css任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gulp=require('gulp');
var less = require('gulp-less');
var path = require('path');
gulp.task('less', function () {
return gulp.src('less/**/*.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('style/'));
});
gulp.task("watch",function () {
gulp.watch("less/**/*.less",['less']);
})

运行gulp任务

1
$ gulp watch

编写less文件

编写一个压缩css任务

安装gulp-cssnano插件

1
$ npm install gulp-cssnano --save-dev

编写压缩css任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp=require('gulp');
var less = require('gulp-less');
var path = require('path');
var cssnano = require('gulp-cssnano');
gulp.task('less', function () {
return gulp.src('less/**/*.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(cssnano()) //在原来的基础上我们多了一步cssnano操作
.pipe(gulp.dest('style/'));
});
gulp.task("watch",function () {
gulp.watch("less/**/*.less",['less']);
})

运行gulp任务

1
$ gulp watch

编写样式

浏览器同步工具browser-sync

安装插件browser-sync

1
$ npm install browser-sync gulp --save-dev

编写任务

1
2
3
4
5
6
7
8
9
var gulp=require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function () {
browserSync.init({
server: {
baseDir: "./"
}
});
});

启动服务

1
$ gulp browser-sync

输入上面提示的本地ip或域名

这个时候就可以预览当前文件夹下的项目了,试试多开浏览器来预览吧