gulp全局安裝

gulp.js是一個自動化構建工具，開發者能夠使用它在項目開發過程當中自動執行常見任務

gulp.js是基於node.js構建的，利用node.js流的威力，能夠快速構建項目

1、安裝步驟

1.cnpm install gulp -g   //全局安裝:爲了執行gulp任務

2.cnpm install gulp     //本地安裝：爲了調用gulp插件的功能

3.gulp -v     //查看版本號，出現版本號即爲安裝成功

2、新建package.json文件

說明：package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件

注意：json文件內是不能寫註釋的，複製如下內容須要刪除註釋

1. 經過  cnpm init建立package.json文件

2.查看package.json幫助文檔，命令提示符執行cnpm help package.json

特別注意：package.json是一個普通json文件，因此不能添加任何註釋。參看 http://www.zhihu.com/question/23004511

4、新建gulfile.js文件（重要）

說明：gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件（其實將gulpfile.js放入其餘文件夾下亦可）

'use strict';
// 載入外掛
var gulp = require('gulp'),
    webserver = require('gulp-webserver'),
    sass = require('gulp-sass'),
    minifycss = require('gulp-minify-css'), //css壓縮
    cssimport = require("gulp-cssimport"),
    //imagemin = require('gulp-imagemin'), //圖片壓縮
    //uglify = require('gulp-uglify'), //js壓縮
    concat = require('gulp-concat'), //文件合併
    notify = require('gulp-notify'), //提示信息
    livereload = require('gulp-livereload') //網頁自動刷新（服務器控制客戶端同步刷新）


//使用webserver啓動一個Web服務器
gulp.task('webserver', function() {
  gulp.src('') //src--root dir
    .pipe(webserver({
        path: '/',
        host: '127.0.0.1',
        port: '8081',
        livereload: true,
        directoryListing: true,
        open: true
    }));
});
//檢查文件
gulp.task('html', function () {
    gulp.src('./**/*.html')
        .pipe(webserver());
});

// 編譯Scss
gulp.task('sass', function(){
    //sass()方法用於轉換sass到css
    return gulp.src('css/main.scss')
        .pipe(sass()) // Converts Sass to CSS with gulp-sass
        .pipe(gulp.dest('dist/css'))
});

// 默認任務
gulp.task('default',['webserver','watch']);

// 監聽文件變化
gulp.task('watch', function() {
    // 看守全部.scss檔
    gulp.watch(['./css/*.scss'],['sass']);
    gulp.watch(['./*.html'], ['html']);
});

 

5、gulp環境下安裝sass

 1.首先全局環境下配置淘寶鏡像（注意：這裏的是全局環境，不是項目根目錄）

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

2.進入項目根目錄安裝

cnpm install --save-dev node-sass

3.在項目根目錄下安裝

npm install --save-dev gulp-sass

4.根據提示進行安裝

5.gulp運行(運行成功後會自動打開一個網頁)

 

 

配置完成