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即可开始开发项目了。