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 pluginsvar 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");**//这个强力推荐，浏览器可视化超级爽**// Stylesgulp.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' }));});// Scriptsgulp.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' }));});// Imagesgulp.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' }));});//htmlgulp.task('html', function() {  return gulp.src('app/**/*.html')    .pipe(htmlmin({collapseWhitespace: true}))    .pipe(gulp.dest('dist'))});//fontsgulp.task('fonts', function () {  return gulp.src('app/fonts/*.+(eot|svg|ttf|woff)')    .pipe(fontmin({text: '哈哈哈',}))    .pipe(gulp.dest('dist/fonts'));});//cleargulp.task('clean', function() {    return gulp.src(['dist/css', 'dist/js', 'dist/images'], {read: false})    .pipe(clean());});// Default taskgulp.task('default', function() {    gulp.start('css', 'scripts', 'images');});// Watchgulp.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节点；