gulp构建web项目

最新推荐文章于 2024-05-08 09:32:59 发布

赵王大人

最新推荐文章于 2024-05-08 09:32:59 发布

阅读量726

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/yuetingzhuying/article/details/59516837

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

gulp有很多组件，下面介绍一些组件用户构建web项目。

gulp-connect

gulp-connect用户在本地运行web服务器，用于本地开发、测试web项目。

安装

npm install –save-dev gulp-connect

使用

var gulp = require('gulp'),
  connect = require('gulp-connect');

gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true
  });
});

gulp.task('html', function () {
  gulp.src('./app/*.html')
    .pipe(connect.reload());
});

gulp.task('watch', function () {
  gulp.watch(['./app/*.html'], ['html']);
});

gulp.task('default', ['connect', 'watch']);

gulp-connect的更多配置，例如指定port、多个目录、https等等，请参考https://www.npmjs.com/package/gulp-connect

gulp-useref

gulp-useref用于自动合并html页面中的css、js等依赖。

安装

npm install –save-dev gulp-useref

使用

首先，需要在html中标明需要合并的css、js。例如：

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

对应的css、js目录为：

css/
one.css

two.css
scripts/
one.js
:two.js

编写gulpfile.js脚本，创建useref任务

var gulp = require('gulp'),
    useref = require('gulp-useref');

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

执行useref任务后，生成的html为：

<html>
<head>
    <link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
    <script src="scripts/combined.js"></script> 
</body>
</html>

生成的css、js目录为：

css/
combined.css
scripts/
combined.js

run-sequence

run-sequence用于按序执行gulp task

安装

npm install –save-dev run-sequence

使用

gulp.task('build', function(callback) {
  runSequence('build-clean',
              ['build-scripts', 'build-styles'],
              'build-html',
              callback);
});

上述代码任务执行顺序：

build-clean
build-scripts和build-styles异步执行
build-html

gulp-if

gulp-if用于条件判断。

还有一些gulp的通用组建，例如压缩css、js、图片等。
下面提供一个完整的gulpfile.js内容：

var gulp = require('gulp'),
rev = require('gulp-rev'),
gulpif = require('gulp-if'),
useref = require('gulp-useref'),
uglify = require('gulp-uglify'),
connect = require('gulp-connect'),
imagemin = require('gulp-imagemin'),
cleanCSS = require('gulp-clean-css'),
runSequence = require('run-sequence'),
jsonMinify = require('gulp-json-minify'),
autoprefixer = require('gulp-autoprefixer'),
revCollector = require('gulp-rev-collector');

gulp.task('connect', function () {
    // 创建本地server，端口为8080
    connect.server({
        root:'./src',
        port: 8080,
        livereload: true
    });
    //监听文件修改，实时刷新
    gulp.watch(['src/**/*'], ['reload']);
});

gulp.task('reload',function () {
    // 刷新
    gulp.src('src/**/*')
    .pipe(connect.reload());
});
gulp.task('imgDev', function () {
    //拷贝、压缩图片
    gulp.src('src/img/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dev/img'));
});

gulp.task('userefDev', function(){
    //合并html中引用的js、css（标记的），并将合并后的文件存储到dev目录下
    return gulp.src('src/html/*.html')
    .pipe(useref())
    .pipe(gulpif('*.css', autoprefixer()))
    .pipe(gulp.dest('dev/html'));
});

gulp.task('copyData', function () {
    //拷贝data数据
    return gulp.src(['src/data/*'])
    .pipe(gulp.dest('dev/data'));
});

gulp.task('copyLib', function () {
    //拷贝第三方库，即将html中useref没有处理的js文件拷贝
    gulp.src('src/js/photoswipe/*')
    .pipe(gulp.dest('dev/js/photoswipe'));
});

gulp.task('revDev', function () {
    // 为所有文件（除html）生成版本号，并将版本文件映射关系写入dev/rev-manifest.json
    return gulp.src(['dev/**/*', '!dev/html/*'])
    .pipe(rev())
    .pipe(gulp.dest('dev'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dev'));
});

gulp.task('revCollector', function () {
    // 根据dev/rev-manifest.json控制html文件中资源的版本
    return gulp.src(['dev/rev-manifest.json', 'dev/**/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('dev'));
});

gulp.task('miniDev', function(){
    return gulp.src(['dev/**/*', '!dev/rev-manifest.json'])
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', autoprefixer()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(gulpif('*.png', imagemin()))
    .pipe(gulpif('*.svg', imagemin()))
    .pipe(gulpif('*.gif', imagemin()))
    .pipe(gulpif('*.jpg', imagemin()))
    .pipe(gulpif('*.json', jsonMinify()))
    .pipe(gulp.dest('dev/'));
});

gulp.task('miniDist', function(){
    // 压缩dev目录下的js、css、
    return gulp.src(['dev/**/*', '!dev/rev-manifest.json'])
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', autoprefixer()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(gulpif('*.png', imagemin()))
    .pipe(gulpif('*.svg', imagemin()))
    .pipe(gulpif('*.gif', imagemin()))
    .pipe(gulpif('*.jpg', imagemin()))
    .pipe(gulpif('*.json', jsonMinify()))
    .pipe(gulp.dest('dist/'));
});

gulp.task('dev', function(done){
    //
    runSequence(
        ['userefDev', 'imgDev','copyData', 'copyLib'],
        ['revDev'],
        ['revCollector'],
        done);
});

gulp.task('dist', function(done) {
    //依次运行dev、miniDist任务
    runSequence(
        ['dev'],
        ['miniDist'],
        done);
});

赵王大人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gulp构建web项目

gulp有很多组件，下面介绍一些组件用户构建web项目。gulp-connectgulp-connect用户在本地运行web服务器，用于本地开发、测试web项目。安装 npm install –save-dev gulp-connect使用var gulp = require('gulp'), connect = require('gulp-connect');gulp.task('con
复制链接

扫一扫

专栏目录