【Gulp】gulp的安裝和使用

gulp的安裝和使用

前置條件

nodejs和npm環境

點擊前往：Node.js安裝及環境配置之Windows篇

安裝gulp(全局)

在終端輸入：

npm install gulp -g

安裝完成後，輸入gulp -v，輸出相應的版本號，則說明安裝成功。

配置項目

下面以一個簡單案例來做演示：

創一個gulp文件夾作爲項目根目錄，項目結構如下： 

我們以常用的 gulp-uglify、gulp-concat、gulp-minify-css爲例。 
先是配置package.json文件，有三種方法： 
1. 可以用記事本之類的創建一個 
2. 用npm init創建(在項目的根目錄用npm init命令會自動生成) 
3. 也可以複製之前項目的創建好的package.json

本地安裝gulp及gulp插件

本地安裝gulp

項目的根目錄運行命令：

npm install gulp –save-dev

注：加上–save-dev會把描述自動寫入在package.json中

安裝完成後

gulp模塊下載到項目中的node_modules文件夾中。

package.json中寫入了devDependencies字段，並在該字段下填充了gulp模塊名

本地安裝gulp插件
接下來安裝上面提到的三個插件,在終端中輸入

npm install –save-dev gulp-uglify gulp-concat gulp-minify-css

創建gulpfile.js文件
在項目根目錄下創建gulpfile.js文件，然後編寫如下代碼

/*引入gulp及相關插件 require('node_modules裏對應模塊')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//壓縮 
gulp.task('minify-css', function () {
    gulp.src('css/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css/'));
});
//合併
/*gulp.task('script', function () {
    gulp.src(['src/a.js', "src/b.js"])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});*/
//執行多任務
/*
gulp.task('default', ['minify-css', 'script']);*/

運行gulp
可以看到，我們在gulpfile.js創建了3個任務，其實是兩個，最後一個是合併上面兩個任務。然後我們就可以在終端來運行上面的作務了，在項目的根目錄終端輸入 
說明：命令提示符執行gulp 任務名稱

gulp minify-css 

運行結果：在dist/css/目錄下生成了我們壓縮後的css文件。

執行：

gulp script

運行結果：在dist/js/目錄下生成了我們合併後的js文件。

ps一直在控制檯輸入命令比較麻煩，可以在PHPstorm和webstorm中直接運行
--------------------- 

原文地址：gulp的安裝和使用