gulp使用

安裝

1.gulp是基與nodejs的，應此須要安裝nodejs

2.若是要安裝sass插件須要安裝ruby ，再裝gem

3.安裝npm工具，由於須要用npm install gulp的插件

（淘寶鏡像安裝，由於服務器緣由，可能不能安裝npm，可用淘寶鏡像安裝：

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

$ cnpm install [name]

官網；https://npm.taobao.org/）

4.新建package.json文件(package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件)

 

{
  "name": "test",   //項目名稱（必須）
  "version": "1.0.0",   //項目版本（必須）
  "description": "This is for study gulp project !",   //項目描述（必須）
  "homepage": "",   //項目主頁
  "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"
  }
}

　　

5.新建gulpfile.js文件(gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件)

//導入工具包 require('node_modules裏對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less');
 
//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //該任務針對的文件
        .pipe(less()) //該任務調用的模塊
        .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css
});
 
gulp.task('default',['testLess', 'elseTask']); //定義默認任務 elseTask爲其餘任務，該示例沒有定義elseTask任務
 
//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數
//gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組) 
//gulp.dest(path[, options]) 處理完後文件生成路徑

6.安裝gulp

npm install -g gulp #全局安裝
或者npm install gulp --save-dev # 局部安裝

7.gulp default

npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

缺什麼裝什麼

 

 

報錯：

報錯：[gulp] Warning: Gulp version mismatch:
解決：npm install gulp@3.3.4 --save
用這個命令：這裏的3.3.4能夠改爲你須要的版本，通常改爲最新版的便可。

 

有問題從新安裝
報錯：Cannot GET /
根目錄缺失index.html

報錯：Error: Cannot find module 'gulp-sass'
npm install gulp-sass --save-dev

 

使用:

1.先在gulpfile.js文件
var gulp = require('gulp'),
browserSync = require('browser-sync').create();

plugins=require('gulp-load-plugins')(),
uglify = require('gulp-uglify'),
2.而後裝插件
npm install --save-dev gulp-load-plugins

3.在gulpfile.js添加這個插件
gulp.task('minify-js', function () {
gulp.src('Home/Tpl/assets/js/home/home_page.js') // 要壓縮的js文件
.pipe(uglify()) //使用uglify進行壓縮
.pipe(gulp.dest('Home/Tpl/assets/js/min_js')); //壓縮後的路徑
});

4. 在命令行輸入執行gulp minify-js