gulp快速搭建web项目

前言：首先需要安装nodejs。全局安装gulp：npm install -g gulp

1、初始化项目:创建项目文件夹，然后在项目下npm init
2、使用gulp构建一个普通web项目，基本需要这些库（库有很多，自行选择），见代码1。
代码1：

npm install --save-dev gulp del jshint gulp-rename gulp-concat gulp-jshint gulp-uglify gulp-connect gulp-imagemin gulp-minify-css gulp-minify-html gulp-processhtml gulp-autoprefixer

3、在项目根目录创建gulpfile.js文件，基本套路如代码2
代码2：

var gulp = require('gulp'),del = require('del'),rename = require('gulp-rename'),concat = require('gulp-concat'),jshint = require('gulp-jshint'),uglify = require('gulp-uglify'),connect = require('gulp-connect'),imagemin = require('gulp-imagemin'),minifycss = require('gulp-minify-css'),minifyhtml = require('gulp-minify-html'),processhtml = require('gulp-processhtml'),autoprefixer = require('gulp-autoprefixer');gulp.task('server', function(){    connect.server({        root:['./'],        port: 7003,        livereload: true    });});gulp.task('copy', function(){    gulp.src('*.json')    .pipe(gulp.dest('dev'))    .pipe(connect.reload())});gulp.task('html', function(){    gulp.src('*.html')    .pipe(gulp.dest('dev'))    .pipe(connect.reload());});gulp.task('images', function(){    gulp.src('img/*')    .pipe(imagemin())    .pipe(gulp.dest('dev/img'))});gulp.task('scripts', function () {    gulp.src('js/*.js')    .pipe(jshint())    .pipe(gulp.dest('dev/js'))    .pipe(connect.reload())});gulp.task('watch', function () {    // body...    gulp.watch(['*.html'], ['html']);    gulp.watch(['js/*.js'], ['scripts']);});gulp.task('dist', function(){    gulp.src('dev/*.html')    .pipe(processhtml())    .pipe(minifyhtml())    .pipe(gulp.dest('dist'));    gulp.src('dev/js/*.js')    .pipe(concat('app.min.js'))    .pipe(uglify())    .pipe(gulp.dest('dist'));    gulp.src('dev/img/*')    .pipe(gulp.dest('dist/img'));});gulp.task('default', ['server', 'html','images', 'scripts', 'copy', 'watch']);

gulp.src中的路径要根据实际情况。
4、在命令行运行gulp即可开始开发项目了。