安装gulp前端自动化工具

转自：http://blog.csdn.net/itpinpai/article/details/49151269

版权声明：本文为博主原创文章，未经博主允许不得转载。

1.安装gulp前端自动化工具

 

$ npm install --global gulp

 

 

2. 安装gulp插件，gulp插件所属devDependencies下面

 

$ npm install --save-dev gulp

3. 在项目的根目录下新建一个gulpfile.js文件:

 

 

var gulp = require('gulp');


gulp.task('default', function() {
  // place code for your default task here
});

 

4.执行gulp:

$ gulp

以下是常用的插件:
编译Sass (gulp-ruby-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中的配置：

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

如果希望和Grunt一样载入所有已安装的插件可以访问下面网址：https://github.com/jackfranklin/gulp-load-plugins

载入所有插件的插件就是它：gulp-load-plugins。 

载入后的使用方式和grunt有些小区别

PS:在使用gulp的插件时如果插件名有如：gulp-minify-css 这样名字在gulpfile文件中配置使用的方式是minifyCss，去掉中横线，后面的第一个字母大写

配上gulpfile.js文件：

 

'use strict';

var gulp = require('gulp');

//加载package.json文件里的devDependencies中的所有插件
var plugins = require('gulp-load-plugins')();

gulp.task('sass', function () {
  gulp.src('./app/sass/**/*.scss')
    .pipe(plugins.sass({ style: 'expanded' }))
    .pipe(plugins.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(plugins.rename({suffix: '.min'}))
    .pipe(plugins.minifyCss())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(plugins.notify({ message: 'Styles task complete' }));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

配置package.json文件：

 

 

{
  "name": "gulsp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "gulp": "^3.9.0"
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-cache": "^0.3.0",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^1.11.2",
    "gulp-livereload": "^3.8.1",
    "gulp-load-plugins": "^0.10.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.0.4",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.4.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "bxcn",
  "license": "ISC"
}

 

以上操作只是简单跑一下gulp流程，浮浅的很，牛人可忽略此文章，呵呵！