安装gulp
$ npm install --global gulp
Paste_Image.png
如果安装不上可以先安装npm国内镜像源（淘宝）
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Paste_Image.png
Paste_Image.png
安装好cnpm之后通过cnpm安装gulp
$ cnpm install -g gulp
Paste_Image.png
初始化 会在当前文件夹下生成一个package.json文件
$ npm init
Paste_Image.png
将gulp作为项目开发依赖安装
$ npm install --save-dev gulp
ps:如果npm不行 也可以试试cnpm
Paste_Image.png
这个时候打开package.js文件 你会发现里面已经多了gulp
Paste_Image.png
这个时候我们就要在项目跟目录下创建一个名为gulpfile.js的文件 将下面代码复制到gulpfile.js文件中去
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
Paste_Image.png
现在我们就可以编写我们的任务了(●'◡'●)
编写了一个say任务
var gulp = require('gulp');
gulp.task('say', function() {
console.log("hello gulp")
});
运行gulp
$ gulp say
Paste_Image.png
输出了一个hello gulp
现在我们尝试做一些正常点的任务(ง •̀_•́)ง
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"])
});
执行完后 我们会发现光标一直在闪动 像是没有执行完一样 其实就是因为任务还在监听当中
GIF1.gif
现在让我们去编辑文件看看有什么变化吧
GIF.gif
编写一个将less转成css的任务
- 安装gulp-less插件
$ npm install gulp-less --save-dev
Paste_Image.png
- 编写less>>css任务
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']);
})
3.运行gulp任务
$gulp watch
Paste_Image.png
4.编写less文件
GIF.gif
编写一个压缩css任务
- 安装gulp-cssnano插件
$ npm install gulp-cssnano --save-dev
Paste_Image.png
- 编写压缩css任务
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']);
})
3.运行任务
···
$ gulp watch
···
Paste_Image.png
4编写less文件
GIF.gif
浏览器同步工具browser-sync
- 安装插件browser-sync
$ npm install browser-sync gulp --save-dev
Paste_Image.png
2.编写任务
var gulp=require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function () {
browserSync.init({
server: {
baseDir: "./"
}
});
});
3.启动服务器
$ gulp browser-sync
Paste_Image.png
4.这个时候就可以预览当前文件夹下的项目了，试试多开浏览器来预览吧
GIF.gif
