学习使用gulp

安装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官方文档

1. 安装gulp-less插件

$ npm install gulp-less --save-dev

Paste_Image.png

2. 编写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任务

1. 安装gulp-cssnano插件

$ npm install gulp-cssnano --save-dev

Paste_Image.png

2. 编写压缩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

1. 安装插件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