gulp构建项目（一）：环境准备及项目基础结构搭建

这一次的gulp构建项目系列教程，将重头到尾，一步一步的搭建起一个完整的gulp项目，该项目完全能够满足开发需求，能够给开发人员带来最大的便利，也基本解决了在实战项目中遇到的所有问题。

一、创建package.json文件

npm init    // 一路回车就行（默认已安装node）

package.json内容如下:

{
   "name": "gulp-project",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

二、安装项目依赖

1、全局安装gulp

npm i -g gulp

2、安装项目所需模块

/**
* gulp         gulp模块
* gulp-concat  合并文件
* gulp-uglify  压缩js
* gulp-csso    压缩css
* gulp-imagemin    压缩图片
* gulp-clean   清空文件夹
*/
   
npm i -D gulp gulp-concat gulp-uglify gulp-csso gulp-imagemin gulp-clean

三、新建gulpfile.js文件，引入模块

var gulp = require('gulp');
var concat = require('gulp-concat');        // 合并文件
var uglify = require('gulp-uglify');        // js 压缩
var csso = require('gulp-csso');            // css压缩
var imagemin = require('gulp-imagemin');    // 图片压缩
var clean = require('gulp-clean');          // 清空文件夹

四、创建gulp任务

// 打包html
gulp.task('html', function(){
    return gulp.src('./src/*.html')
        .pipe(gulp.dest('./dist'));
});

// 打包js
gulp.task('js_libs', function(){
    return gulp.src('./src/libs/js/*.js')
        .pipe(gulp.dest('./dist/js'));
});
gulp.task('js_main', function(){
    return gulp.src('./src/js/*.js')
        .pipe(concat('main.min.js'))    // 合并文件并命名
        .pipe(uglify())  // 压缩js
        .pipe(gulp.dest('./dist/js'));
});

// 打包css
gulp.task('css_main', function(){
    return gulp.src('./src/css/**/*.css')
        .pipe(concat('main.min.css'))
        .pipe(csso())                   // 压缩优化css
        .pipe(gulp.dest('./dist/css'));
});

// 打包其他资源
gulp.task('images', function () {
    return gulp.src('./src/images/*.*')
        .pipe(imagemin({
            progressive: true,
        }))
        .pipe(gulp.dest('./dist/images'));
});

// 清空dist文件夹
gulp.task('clean', function(){
    return gulp.src(['./dist/*'])
        .pipe(clean());
});

// 默认任务
gulp.task('default', ['clean'], function() {
    gulp.start(['html', 'js_libs', 'js_main','css_main','images'])
});

五、执行打包命令gulp

SG-MAC:gulp-project guang$ gulp

六、文件目录

七、说明

这里展示的是最基础的gulp构建功能，后续会深入解决gulp各项模块的应用，实现全方位的自动化构建。以下大致列出会解决的问题及说明

• 打包之前清空dist文件夹。因为打包只会覆盖改变的文件，在src/中删除的文件，在dist/中会依然存在；

• gulp启本地服务，并实现热更新提高开发效率；

• gulp任务是异步运行的，默认将并行运行所有任务；任务中的步骤也是异步的，因此各个步骤也是并行的。需要实现逐个执行任务的需求；

• 任务之间尽可能不要用依赖的方式逐个执行任务，因为很多任务在业务上没有依赖关系，这样会影响后续的监听任务执行；

• 一个任务只做一件事情，方便后续监听；

• 设置环境变量并根据当前环境做不同处理；

• html公用模板提取。比如：公用head、footer；

• 压缩js时，检查js文件语法错误；

• 编译less，添加CSS前缀；

• 给静态资源文件添加版本号，解决浏览器缓存的问题；

• 重新定义文件打包之后的路径；

• 编译es6语法；

• 编译es6新增的方法，比如Object.assign()；

• 解决报错之后，服务挂掉的问题；

.

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题