这一次的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();
-
解决报错之后,服务挂掉的问题;
.
项目地址(别忘了给星哦)
相关文章
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发生错误时,进程挂掉的问题