gulp.js 的安裝以及使用

首先：電腦須要安裝 Node.js 一個大綠色的安裝按鈕，點擊就能夠。
但仍是推薦，點擊download選中一款適合電腦配置的版本。

Node安裝過程，就是下一步 and 下一步~~

測試手否安裝成功：

node -v

如今開始安裝 gulp.js

全局安裝gulp
npm install -g gulp

安裝好後，把gulp安裝到本地
npm install --save-dev  gulp

如今能夠用安裝本地的方法分別把以下插件安裝上：

編譯Sass (gulp-ruby-sass)與[gulp-sass]均可以
    Autoprefixer (gulp-autoprefixer)
    縮小化(minify)CSS (gulp-minify-css)
    JSHint (gulp-jshint)
    拼接 (gulp-concat)
    醜化(Uglify) (gulp-uglify)
    圖片壓縮 (gulp-imagemin)
    即時重整(LiveReload) (gulp-livereload)
    清理檔案 (gulp-clean)
    圖片快取，只有更改過得圖片會進行壓縮 (gulp-cache)
    更動通知 (gulp-notify)

而後再跟目錄內建立一個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
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合併，壓縮文件
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'));
});

// 默認任務
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 監聽文件變化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});



//後補，更加詳細的注視
// 引入 gulp
var gulp = require('gulp'); 

// 引入組件
var uglify = require('gulp-uglify');  //壓縮js
var concat = require('gulp-concat');  //合併js
var server = require('gulp-server-livereload');  //服務自動刷新
var minifyCss = require('gulp-minify-css'); //壓縮CSS
var sourcemaps = require('gulp-sourcemaps');


//不用配置只要服務啓動，過後的全部操做都會自動刷新
gulp.task('webserver', function() {
  gulp.src('.')
    .pipe(server({
      livereload: true,
      open: true,
      directoryListing: true
      //defaultFile: 'gulp.html'
    }));
});

// 合併/壓縮文件js
gulp.task('uglify-concat', function() { //合併/壓縮
  return gulp.src('js/*.js')   //引入Js路徑
    .pipe(uglify())         //壓縮Js
    .pipe(concat('all.js'))  //合併Js
    .pipe(gulp.dest('dist'));  //壓縮Js後生成的路徑
});

//壓縮CSS
gulp.task('minify-css', function() {
  return gulp.src('./style/*.css')
    //.pipe(sourcemaps.init())  注視的這兩個能夠顯示樣式下的sourcemaps
    .pipe(minifyCss())
    //.pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});


// 默認任務
gulp.task('default', function(){
    gulp.run('minify-css');    //run方法已經被淘汰了，能夠嘗試用繼承的方式，或者用watch

    // 監聽文件變化
    gulp.watch('js/*.js', function(){
        gulp.run('uglify-concat');
    });
});

這樣就能夠了：接下來介紹點細節與其它須要瞭解的。
gulp只有五個方法： task，run，watch，src，和dest，在項目根目錄新建一個js文件並命名爲gulpfile.js

另外，爲什麼安裝插件的時候須要加 --save-dev
是想把插件放入開發列表裏面，這樣 npm install初始化安裝的時候，就會根據這個表來進行相應下載。
這個文件名爲package.json
固然這個文件能夠複製粘貼，固然有一種方法能夠初始化它。

npm init

根據步驟提示就能夠自動生成了。具體文檔內容請參考。linlincat 的 github
這裏面有個許可證號，以前是可隨意配置的，如今不瞭解具體緣由，默認就能夠了。官網有詳細解釋。

如今就能夠放心使用你的gulp去執行[管理]你的項目了。

{ "name": "test", //項目名稱（必須） "version": "1.0.0", //項目版本（必須） "description": "This is for study gulp project !", //項目描述（必須） "homepage": "http://www.dtao.org", //項目主頁 "repository": { //項目資源庫 "type": "git", "url": "https://git.oschina.net/xxxx" }, "author": { //項目做者信息 "name": "surging", "email": "surging2@qq.com" }, "license": "ISC", //項目許可協議 "devDependencies": { //項目依賴的插件 "gulp": "^3.8.11", "gulp-less": "^3.0.0" } }