簡單學習一下gulp的使用。

一、安裝

1、安裝node

安裝地址：https://nodejs.org/en/ (npm也會安裝成功，npm是node包管理工具)

2、命令行

node -v
npm -v
若能出現(xiàn)版本號，表明安裝成功；否則需要重裝

3、常見命令 （Linux命令）

cd 目錄切換
ls 顯示文件列表
利用cd切換到項目目錄下

4、安裝gulp

sudo npm install -g gulp
解釋：sudo--管理員身份執(zhí)行命令；
npm install--安裝；
-g --全局環(huán)境的安裝，任何項目均可使用；
gulp --安裝node模塊的名稱
gulp -v 是否安裝成功
npm install —-save-dev gulp 將gulp安裝到項目本地

5、安裝依賴

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 安裝依賴
若沒有權限，使用sudo試試

二、新建Gulpfile文件

在項目根目錄新建一個js文件并命名為 gulpfile.js
加入下面代碼：
// 引入 gulp
var gulp = require('gulp');
// 引入組件
var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');
// 檢查腳本
gulp.task('lint', function() { gulp.src('./js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });
// 編譯Sass
//編譯 scss/ 目錄下的scss文件，并把編譯完成的css文件保存到 /css 目錄中。
gulp.task('sass', function() { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); });
// 合并，壓縮文件
//scripts任務會合并 js/ 目錄下得所有得js文件并輸出到 dist/ 目錄，然后gulp會重命名、壓縮合并的文件，也輸出到 dist/ 目錄。
gulp.task('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); });
// 默認任務
//創(chuàng)建了一個基于其他任務的default任務。使用 .run() 方法關聯(lián)和運行我們上面定義的任務，使用 .watch() 方法去監(jiān)聽指定目錄的文件變化，當有文件變化時，會運行回調定義的其他任務。
gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 監(jiān)聽文件變化 gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); });

三、運行gulp

gulp 或者 gulp default 運行