gulp前端自動化構建工具學習筆記（mac）

gulp是一個前端自動化構建工具，簡單方便，學習起來也很方便。gulp是基於node.js的，所以首先要在電腦上安裝node.js.

1：安裝node.js

　　npm（node package manager）是nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）；

2：安裝cnpm；

1. 說明：因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，如果npm的服務器在中國就好了，所以我們樂於分享的淘寶團隊干了這事。來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。”
2. 官方網址：http://npm.taobao.org
3. 安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org
4. 注意：安裝完后最好查看其版本號cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現錯誤；

3：全局安裝gulp；

npm install -g gulp       //-g   全局安裝的意思

4：使用終端工具新建一個文件夾做為項目根目錄

mkdir gulptest     //mkdir 是終端新建文件夾的命令    gulptest是新建文件夾的名字

5：初始化gulp

cnpm init //初始化gulp 自動創建package.json       package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件；

 

初始化之后  直接都是默認  只需要修改紅框中的 js名稱  改成gulpfile.js   最后輸入yes完成 package.json的創建。

6：安裝gulp 用到的工具包 　（我這里只在項目中安裝了gulp gulp-less gulp-minify-css browser-sync）

　　進入到項目文件夾下  cnpm install gulp --save-dev    （gulp）為插件名稱

　　安裝完成之后會在項目中自動生成一個文件夾node_modules   存放安裝的工具包

　　gulp  在項目中重新安裝一下gulp

　　gulp-less 把less文件編譯成css文件的插件

　　gulp-minify-css  壓縮css的插件

　　browser-sync   保存文件瀏覽器自動刷新的插件

 

7：用webstorm打開gulptest項目 創建文件夾以及文件結構如下

src>>less>>index.less   該文件為自己編寫的less文件

src>>css>>    該文件夾下存放的less被編譯成功后的css文件

dist>>css>>   該文件夾下存放的是被壓縮后的用於項目中的css文件

8：編寫gulpfile.js文件

//導入工具包 require('node_modules里對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less'), //less編譯
    cssmin = require('gulp-minify-css'), //css壓縮
    browserSync = require("browser-sync").create(),
    reload = browserSync.reload;

/**
 * 定義一個Less編譯任務
 */
gulp.task('Less', function () {
    gulp.src('src/less/index.less') //該任務針對的文件
        .pipe(less()) //該任務調用的模塊
        .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css
});

/**
 * css壓縮任務
 */
gulp.task('minCss', function () {
    gulp.src('src/css/index.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'))
});

/**
 * 監聽css文件，當src/css/下所有css文件發生改變時，調用minCss任務
 */
gulp.task('WatchCss', function () {
    gulp.watch('src/css/*.css', ['minCss']);
});

/**
 * 監聽less文件，當src／less下所有的less文件發生改變時，調用Less任務
 */
gulp.task('Watch', function () {
    gulp.watch('src/**/*.less', ['Less']); //當所有less文件發生改變時，調用testLess任務
});


gulp.task('default',['Less','Watch','minCss','WatchCss',]); //定義默認任務   只需要開啟默認任務就可以

 

9：webstorm  如何打開gulp任務管理器

　　在gulpfile.js上右擊鼠標，選擇Show Gulp  Tasks ，在打開的gulp任務列表中雙擊default  即可開啟任務。

 

10：編寫less代碼

　　打開index.less　　文件  編寫一段less代碼  保存一下 會自動生成css文件和壓縮后的css文件。

　　編譯后的css文件：

 

壓縮后的css文件