前言:首先需要安装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即可开始开发项目了。