安裝gulp
$ npm install --global gulp

Paste_Image.png

如果安裝不上可以先安裝npm國內(nèi)鏡像源（淘寶）
$ 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

初始化 會在當(dāng)前文件夾下生成一個(gè)package.json文件
$ npm init

Paste_Image.png

將gulp作為項(xiàng)目開發(fā)依賴安裝
$ npm install --save-dev gulp

ps:如果npm不行 也可以試試cnpm

Paste_Image.png

這個(gè)時(shí)候打開package.js文件 你會發(fā)現(xiàn)里面已經(jīng)多了gulp

Paste_Image.png

這個(gè)時(shí)候我們就要在項(xiàng)目跟目錄下創(chuàng)建一個(gè)名為gulpfile.js的文件 將下面代碼復(fù)制到gulpfile.js文件中去

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認(rèn)的任務(wù)代碼放在這
});

Paste_Image.png

現(xiàn)在我們就可以編寫我們的任務(wù)了(●'?'●)

編寫了一個(gè)say任務(wù)

var gulp = require('gulp');

gulp.task('say', function() {
    console.log("hello gulp")
});

運(yùn)行g(shù)ulp
$ gulp say

Paste_Image.png

輸出了一個(gè)hello gulp

現(xiàn)在我們嘗試做一些正常點(diǎn)的任務(wù)(? ??_??)?

var gulp = require('gulp');

gulp.task('copy', function () {
    //gulp.src提取一個(gè)文件
    gulp.src("src/index.html")
    //將文件導(dǎo)入到dist文件夾中
        .pipe(gulp.dest("dist/"));
});

gulp.task("dist", function () {
    //監(jiān)聽index.html文件 當(dāng)index.html發(fā)生改變時(shí)執(zhí)行copy任務(wù)
    gulp.watch("src/index.html", ["copy"])
});

執(zhí)行完后 我們會發(fā)現(xiàn)光標(biāo)一直在閃動 像是沒有執(zhí)行完一樣 其實(shí)就是因?yàn)槿蝿?wù)還在監(jiān)聽當(dāng)中

GIF1.gif

現(xiàn)在讓我們?nèi)ゾ庉嬑募纯从惺裁醋兓?/p>

GIF.gif

編寫一個(gè)將less轉(zhuǎn)成css的任務(wù)

gulp-less官方文檔

1. 安裝gulp-less插件

$ npm install gulp-less --save-dev

Paste_Image.png

2. 編寫less>>css任務(wù)

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.運(yùn)行g(shù)ulp任務(wù)

$gulp watch

Paste_Image.png

4.編寫less文件

GIF.gif

編寫一個(gè)壓縮css任務(wù)

1. 安裝gulp-cssnano插件

$ npm install gulp-cssnano --save-dev

Paste_Image.png

2. 編寫壓縮css任務(wù)

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())  //在原來的基礎(chǔ)上我們多了一步cssnano操作
        .pipe(gulp.dest('style/'));
});

gulp.task("watch",function () {
    gulp.watch("less/**/*.less",['less']);
})

3.運(yùn)行任務(wù)
···
$ 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.編寫任務(wù)

var gulp=require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function () {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

3.啟動服務(wù)器

$ gulp browser-sync

Paste_Image.png

4.這個(gè)時(shí)候就可以預(yù)覽當(dāng)前文件夾下的項(xiàng)目了，試試多開瀏覽器來預(yù)覽吧

GIF.gif