gulp 配置

初學gulp，終於把常用的配置，api,語法弄明白了！

gulp插件地址：http://gulpjs.com/plugins
gulp官方網址：http://gulpjs.com
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

我的頁面結構，暫時這樣。。。

D:.
└─gulp
    ├─app
    │  ├─css
    │  ├─fonts
    │  ├─images
    │  └─js
    └─dist
        ├─css
        ├─fonts
        ├─images
        └─js
        gulpfile.js
        package.json

gulpfile.js文件

/*!
 * gulp
 * $ cnpm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-sourcemaps jshint gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename browser-sync gulp-cache gulp-htmlmin gulp-fontmin --save-dev
 */
// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    htmlmin = require('gulp-htmlmin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    fontmin = require('gulp-fontmin'),
    browserSync = require("browser-sync");**//這個強力推薦，瀏覽器可視化超級爽**

// Styles
gulp.task('css', function() {
    return gulp.src('app/css/**/*.scss')
    .pipe(sourcemaps.init())  
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(autoprefixer({browsers: ['last 2 versions','safari 5', 'ie 6','ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'],cascade: false}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app/css'))
    .pipe(gulp.dest('dist/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('app/css'))
    .pipe(gulp.dest('dist/css'))
    .pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
  return gulp.src('app/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
  return gulp.src('app/images/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});
//html
gulp.task('html', function() {
  return gulp.src('app/**/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'))
});
//fonts
gulp.task('fonts', function () {
  return gulp.src('app/fonts/*.+(eot|svg|ttf|woff)')
    .pipe(fontmin({text: '哈哈哈',}))
    .pipe(gulp.dest('dist/fonts'));
});
//clear
gulp.task('clean', function() {  
  return gulp.src(['dist/css', 'dist/js', 'dist/images'], {read: false})
    .pipe(clean());
});
// Default task
gulp.task('default', function() {
    gulp.start('css', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
  browserSync.init({server: {baseDir: "app/"}});
  // Watch .scss files
  gulp.watch('app/css/**/*.scss', ['css']);
  // Watch .js files
  gulp.watch('app/js/**/*.js', ['scripts']);
  // Watch image files
  gulp.watch('app/images/*', ['images']);
  // Watch .html files
  gulp.watch('app/**/*.html', ['html']);
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change',  browserSync.reload);
});

package.json文件 (npm init)
一個例子

{
  "devDependencies": {
    "browser-sync": "^2.14.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^0.4.5",
    "gulp-concat": "^2.6.0",
    "gulp-fontmin": "^0.7.4",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.1.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^2.0.0",
    "jshint": "^2.9.3",
    "sass": "^0.5.0"
  },
  "name": "a test",
  "version": "1.0.0",
  "description": "a test",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "sass": "^0.5.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "a test"
  ],
  "author": "li",
  "license": "ISC"
}

直接把package.json 拿來，直接npm install 在項目目錄就OK

如果是新建項目則：

則全局安裝gulp：

npm install gulp -g` 

新建一個package.json

npm init 

命令行中會出現

Press ^C at any time to quit.
name: (a1)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

填各種信息，填完出現下面

{
  "name": "a1",//項目名稱（必填）
  "version": "1.0.0",//項目版本（必填）
  "description": "a test",//項目描述（必填）
  "main": "gulpfile.js",//入口文件
  "test command" //測試命令
  "git repository" //git 地址
  "keywords" //關鍵字
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",//作者
  "license": "ISC" //許可信息
}

Is this ok? (yes)

爲了能正常使用，我們還得本地安裝gulp：

npm install gulp --save-dev；

全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。

嫌棄npm國內下載太慢的，可以試試cnpm

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

安裝好後各種 操作和npm一樣，就多加個c

之後就是需要什麼就安裝什麼插件了

cnpm install xxxx --save-dev

–save：將保存配置信息至package.json
-dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；