gulp快速搭建web项目

63 阅读 0 评论 42 点赞

我是靠谱客的博主灵巧学姐，最近开发中收集的这篇文章主要介绍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']);