gulp构建项目（一）：环境准备及项目基础结构搭建
一、创建package.json文件
npm init // 一路回车就行（默认已安装node）1
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"}1234567891011二、安装项目依赖
1、全局安装gulp
npm i -g gulp1
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-clean12345678910
三、新建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'); // 清空文件夹123456四、创建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'])});123456789101112131415161718192021222324252627282930313233343536373839404142434445五、执行打包命令gulp
SG-MAC:gulp-project guang$ gulp1
六、文件目录
七、说明
这里展示的是最基础的gulp构建功能，后续会深入解决gulp各项模块的应用，实现全方位的自动化构建。以下大致列出会解决的问题及说明
打包之前清空dist文件夹。因为打包只会覆盖改变的文件，在src/中删除的文件，在dist/中会依然存在；
gulp启本地服务，并实现热更新提高开发效率；
gulp任务是异步运行的，默认将并行运行所有任务；任务中的步骤也是异步的，因此各个步骤也是并行的。需要实现逐个执行任务的需求；
任务之间尽可能不要用依赖的方式逐个执行任务，因为很多任务在业务上没有依赖关系，这样会影响后续的监听任务执行；
一个任务只做一件事情，方便后续监听；
设置环境变量并根据当前环境做不同处理；
html公用模板提取。比如：公用head、footer；
压缩js时，检查js文件语法错误；
编译less，添加CSS前缀；
给静态资源文件添加版本号，解决浏览器缓存的问题；
重新定义文件打包之后的路径；
编译es6语法；
编译es6新增的方法，比如Object.assign()；
解决报错之后，服务挂掉的问题；
评论 (0)