前端构建工具gulp

1、安装Node
首先，最基本也最重要的是，我们需要搭建node环境。访问 http://nodejs.org ，然后点击大大的绿色的 install 按钮，下载完成后直接运行程序，就一切准备就绪。 npm 会随着安装包一起安装，稍后会用到它。

安装完：
node -v
npm -v
可以查看node的版本，和node版本安装工具的版本。

2、安装gulp
cd切换到项目目录：
npm install -g gulp
-g表示在全局环境安装，以便任何项目都能使用它。
安装完gulp后
gulp -v
查看是否能正常显示版本号。

3、安装所需扩展
在项目目录下放package.json

 
 
{
  "name": "cf",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-amd-optimize": "^0.4.3",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-concat": "^2.6.0",
    "gulp-css-spritesmith": "0.0.5",
    "gulp-imagemin": "^3.0.3",
    "gulp-jshint": "^2.0.1",
    "gulp-livereload": "^3.8.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.1.0",
    "gulp-uglify": "^2.0.0",
    "gulp.spritesmith": "^6.2.1",
    "jshint": "^2.9.4"
  }
}

包可以根据自己需要选择性修改。
npm install运行，自动安装package.json中的扩展。

4、新建Gulpfile文件，运行gulp

 
 
var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    amdOptimize = require('gulp-amd-optimize'),
    minifycss = require('gulp-clean-css'),
    imagemin = require('gulp-imagemin'),
    autoprefixer = require('gulp-autoprefixer'),
    sass = require('gulp-ruby-sass'),
    spritesmith = require('gulp.spritesmith'),
    cssSprite = require('gulp-css-spritesmith'),
    livereload = require('gulp-livereload'),
    del = require('del');
 
//清理文件
gulp.task('clean', function(cb) {
    del(['dist'], cb);
});
 
//处理css文件，合并压缩
gulp.task('css',function(){
    return gulp.src( ['css/*.css'])
        .pipe(autoprefixer({
            borwsers: ['last 2 versions'," > 5% "]
        }))
        .pipe(concat('main.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css'))
        .pipe(notify({ message: 'Css task complete' }));
});
 
gulp.task('cfjs-chat', function() {
  return gulp.src(['js/socket.io.js','js/json2.js','js/face.js','js/chat.js'])
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    //.pipe(amdOptimize( 'main'))
    .pipe(concat('cf-chat.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename('cf-chat.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(uglify())
    .pipe(notify({ message: 'Scripts task complete' }));
});
 
//合并压缩JS文件
gulp.task('scripts',['js'],function(){
    return gulp.src('js/util/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/util'))
});
 
//压缩图片
gulp.task('img',function () {
    gulp.src('images/min/*')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('dist/img'))
        .pipe(notify({ message: 'Images task complete' }));
});
 
//css精灵
gulp.task('sprite',function ( cb ) {
    var spriteData = gulp.src('dist/img/*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css',
        padding: 2
    }));
    return spriteData.pipe(gulp.dest('sprite'));
});
 
//文件监控
gulp.task( 'watch',function(){
    gulp.watch( 'css/**/*.*',[ 'css' ] );
    gulp.watch( 'js/**/*.*',[ 'scripts' ] );
});

有需要要完整gulpfile.js的可以留言。不过这些都是比较老的技术了，现在流行的是：webpack。

更多请支持：http://www.webyang.net/Html/web/article_282.html