gulp构建html项目,gulp构建项目

1.前言

gulp是基于node环境上运行的,所以在构建项目前,要先安装node

打开cmd,输入 node -v ;如果显示版本号,则为安装成功

2. 安装

全局安装gulp

npm install gulp -g

切换到项目文件夹,初始化项目

npm init

初始化成功后,文件夹中会多一个package.json文件.

2.png

切换到项目文件夹,安装gulp

npm install gulp --save-dev

安装成功后,会多一个node_modules文件夹.

3.png

3.创建gulpfile.js文件

gulp需要一个文件作为主文件,所以需要创建一个js文件.

创建

4.png

4.大致流程

先通过gulp.src()获取到我们想处理的文件,再通过pipe()方法,将文件流导入到gulp中去,经过gulp处理后再通过gulp.dest()方法重新写入到我们指定的位置中.

5.gulp API -- gulp.src()

语法

gulp.src(globs[, options])

参数

glob : 数据类型 -- String/Array;为文件匹配模式,用来匹配文件路径.也可以为具体的文件路径.

option:可选参数,一般用不到.

node-glob 语法

* 匹配0个或多个字符,但不匹配分隔符

? 匹配一个字符

[...] 匹配方括号中的任意一个,当方括号中第一个字符是^或者!的时候,则不匹配方括号中的任意一个

!(pattern|pattern|pattern) 匹配与所提供的模式不匹配的任何内容

?(pattern|pattern|pattern) 匹配所提供模式中的0或1个;

+(pattern|pattern|pattern)匹配所提供模式中的1个或多个;

*(a|b|c)匹配所提供模式中的0个或多个;

@(pattern|pat*|pat?erN) 匹配所提供的模式之一

** 匹配0个或多个目录和子目录

6. gulp API -- gulp.dest()

文件输出目录

语法

gulp.dest(path[, options])

参数

path : 类型 - String/Function;文件将被写入的路径(输出目录),也可以是函数.在函数中返回相应路径.

option:可选参数,一般用不到.

例子1

var gulp = require('gulp');

gulp.task('default',function(){

gulp.src('static/css/style.css')

.pipe(gulp.dest('dist/css'))

})

// 输出路径为 dist/css/style.css

这里需要注意的一点是,这里输入的目录我们可以自定义,但是文件名是由src()里的名字决定的

例子2

var gulp = require('gulp');

gulp.task('default',function(){

gulp.src('static/css/style.css')

.pipe(gulp.dest('dist/css/xixi.css'))

})

// 这时的输出路径是 dist/css/xixi.css/style.css

var gulp = require('gulp');

gulp.task('default',function(){

gulp.src('static/css/style.css')

.pipe(gulp.dest('dist'))

})

// 这时的输出路径是 dist/style.css

var gulp = require('gulp');

gulp.task('default',function(){

gulp.src('static/**/style.css')

// static/test/style.css

.pipe(gulp.dest('dist'))

})

// 这时的输出路径是 dist/test/style.css

// 从有通配符开始出现的那部分路径开始

7.gulp API -- gulp.task()

用法

gulp.task(name[, deps], fn)

参数

name : 任务的名字

deps:任务列表组成的数组.这些任务会在你当前任务运行之前完成.

fn:任务函数

用法

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {

// do something

//执行mytask任务之前,会把数组里的任务都完成.

});

异步问题

gulp.task('asyn',function(){

console.log('执行异步任务之前') //首先打印出这句

setTimeout(function(){

console.log('异步任务执行之后') //最后打印

},2000)

})

gulp.task('default',['asyn'],function(){

console.log('执行完asyn之后,才执行此任务.') // 第二个打印

})

5.png

异步解决

fn接受一个callback

gulp.task('asyn',function(cb){

console.log('执行异步任务之前')

setTimeout(function(){

console.log('异步任务执行之后')

cb()

},2000)

})

gulp.task('default',['asyn'],function(){

console.log('执行完asyn之后,才执行此任务.')

})

6.png

fn返回一个stream

gulp.task('asyn',function(cb){

var stream = gulp.src('*static/css/*.css')

.pipe(minify()) //异步操作

.pipe(gulp.dest('dist/css'))

return stream;

})

gulp.task('default',['asyn'],function(){

})

fn返回一个promise

var Q = require('q');

gulp.task('asyn', function() {

var deferred = Q.defer();

// 执行异步的操作

setTimeout(function() {

deferred.resolve();

}, 1);

return deferred.promise;

});

顺序

gulp.task('one', function(cb) {

//do something...

cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了

});

// two需要依赖one来完成.

gulp.task('two', ['one'], function() {

// 'one' 完成后

});

gulp.task('default', ['one', 'two']);

8.gulp API -- 自动编译gulp.watch()&browserSync

vue是自动编译,只要我们改动文件,保存之后,页面就会自动刷新,gulp也可以实现这一功能.

安装browser-sync

npm install browser-sync --save-dev

7.png

安装成功后,package.json中会增加一行代码.

代码

var gulp = require('gulp'),

browserSync = require("browser-sync").create();//浏览器实时刷新

gulp.task('default',function(){

browserSync.init({

file:['*.html','static/css/*css','static/js/*.js'],

server:{

baseDir:'./'

}

})

gulp.watch('./*.html').on('change',browserSync.reload)

gulp.watch('./static/css/*.css').on('change',browserSync.reload)

gulp.watch('./static/js/*.js').on('change',browserSync.reload)

})

我的文件结构如下,这样就完成了自动编译.

8.png

8.我的配置

var gulp = require('gulp'),

browserSync = require("browser-sync").create(),//浏览器实时刷新

stylus = require('gulp-stylus'), //处理stylus

uglify = require('gulp-uglify'), //压缩js

rename = require('gulp-rename'), //重命名

minifyCss = require('gulp-minify-css'),//压缩CSS

minifyHtml = require('gulp-minify-html'),//压缩html

imagemin = require('gulp-imagemin'),//压缩图片

pngquant = require('imagemin-pngquant'),//深度压缩图片

concat = require("gulp-concat");//文件合并

//处理html

gulp.task('html', function () {

var options = {

removeComments: true,//清除HTML注释

collapseWhitespace: true,//压缩HTML

removeScriptTypeAttributes: true,//删除

removeStyleLinkTypeAttributes: true,//删除

minifyJS: true,//压缩页面JS

minifyCSS: true//压缩页面CSS

};

gulp.src('./*.html')

.pipe(minifyHtml(options))

.pipe(gulp.dest('./build'))

// .pipe(browserSync.reload({stream:true})); //重刷页面

});

//处理css

gulp.task('stylus',function(){

return gulp.src('./static/css/*.styl')

.pipe(stylus())

.pipe(gulp.dest('./static/css'))

.pipe(minifyCss())

.pipe(gulp.dest('./build/static/css'))

.pipe(browserSync.reload({stream:true}));

})

// 压缩js

gulp.task('script',function () {

gulp.src('./static/js/*.js')

.pipe(uglify())

// .pipe(rename('*.min.js')) //重命名

.pipe(gulp.dest('./build/static/js'))

})

// 压缩图片

gulp.task('image',function () {

gulp.src('./static/images/*')

.pipe(imagemin({

progressive:true, //无损压缩图片

svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性

use:[pngquant()] //使用pngquant深度压缩

}))

.pipe(gulp.dest('./build/static/images'))

.pipe(browserSync.reload({stream:true}));

})

//自动编译

gulp.task('watch',function(){

gulp.start('stylus');

browserSync.init({

file:['*.html','static/css/*css','static/js/*.js'],

server:{

baseDir:'./'

}

})

gulp.watch('./*.html').on('change',browserSync.reload) //仅刷新页面

// gulp.watch('./*.html', ['html']) 执行一次html任务

gulp.watch('./static/css/*.styl',['stylus'])

gulp.watch('./static/js/*.js').on('change',browserSync.reload)

})

// 打包

gulp.task('build',['html','stylus','script','image'])

//开发

gulp.task('default',['stylus','watch'])