学习使用gulp

安装gulp
$ npm install --global gulp

Paste_Image.png

如果安装不上可以先安装npm国内镜像源（淘宝）
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

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

安装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