使用Gulp构建前端项目

最新推荐文章于 2025-03-27 10:13:50 发布

探寻时间

最新推荐文章于 2025-03-27 10:13:50 发布

阅读量1.5k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/SeekerTime/article/details/69525100

版权

Gulp 专栏收录该内容

3 篇文章

订阅专栏

一、什么是Gulp?
Gulp是新一代前端项目构建工具，可以使用Gulp及其插件对你的项目代码（less,sass）等进行编译，还可以压缩你的js和css代码，甚至是压缩你的图片，Gulp仅有少量的API，所以非常容易学习。Gulp使用stream方式处理内容。

Node催生了一批自动化工具，像Yeoman, Bower, Grunt等。

Gulp和Grunt的异同点：
易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。
高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快的完成构建。
高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就是一系列流管道。
使用Gulp首先需要在电脑上安装 node 和 npm，npm 是node的包管理器。

二、Gulp的安装
1、安装Gulp
Gulp的安装命令：
npm install -g gulp
在mac 或 Linux上：
sudo npm install -g gulp
在根目录下新建 package.json文件：
npm init .
安装Gulp 包：
npm install gulp --save-dev

查看版本号：

gulp -v

2、安装插件

常用的插件有：

sass的编译 (gulp-ruby-sass)

自动添加css前缀 (gulp-autoprefixer)

压缩css (gulp-minify-css)

js代码校验 (gulp-jshint)

合并js文件 (gulp-concat)

压缩js代码 (gulp-uglify)

压缩图片 (gulp-imagemin)

自动刷新页面 (gulp-livereload)

图片缓存 (gulp-cache) 只有图片替换了才压缩

更改提醒 (gulp-notify)

清除文件 (del)

安装这些插件命令：
npm install gul-concat gulp-jshint del --save-dev

--save和 --save-dev 可以省掉你手动修改package.json文件的步骤：

npm install module-name --save 自动把模块和版本号添加到dependencies部分

npm install module-name --save-dev 自动把模块和版本号添加到devdependecies部分

3、gulp命令

你仅仅需要知道5个gulp命令

gulp.task(name,[,deps],fn) 定义任务

name：任务名称 deps：依赖任务名称 fn：回调函数

gulp.run(tasks.....) 尽可能多的并行运行多个task

gulp.watch(glob,fn) 当glob内容发生改变时，执行fn

gulp.src(glob) 设置需要处理的文件的路径，可以是多个文件以数组的形式，也可以是正则

gulp.dest(path[,options]) 设置生成文件的路径

说明：

glob：可以是一个直接的文件路径，它的含义是模式匹配。

gulp将要处理的文件通过管道（pipe()）API导向相关插件，通过插件执行文件的处理任务。

gulp.task('default',funciton(){......}) :

gulp.task这个API用来创建任务，在命令行下可以输入 $ gulp [default], （中括号表示可选）来执行上面的任务。

gulp官方API文档：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 插件大全：http://gulpjs.com/plugins/

三、开始构建项目

在项目根目录下新建一个gulpfile.js 文件，粘贴如下代码：

 //在项目根目录引入gulp和uglify插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('compress',function(){
	return gulp.src('script/*.js')
			.pipe(uglify())
			.pipe(gulp.dest('dist'));
});

注：gulpfile.js 文件名不可更改。

项目需要用到uglify 和 rename 插件，执行以下命令安装：

npm install gulp-uglify --save-dev

npm install gulp-rename --save-dev

进入项目所在文件，然后输入：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('compress',function(){
	return gulp.src('script/*.js')
			.pipe(uglify())
                        .pipe(rename('jquery.ui.min.js'))
			.pipe(gulp.dest('dist'));
});

运行：grunt compress ，该命令会安装package.json 下的全部依赖。

四、完整的gulpfile.js

// 载入外挂
var gulp = require('gulp'), 
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
 
// 样式
gulp.task('styles', function() { 
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});
 
// 脚本
gulp.task('scripts', function() { 
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});
 
// 图片
gulp.task('images', function() { 
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});
 
// 清理
gulp.task('clean', function() { 
  return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
    .pipe(clean());
});
 
// 预设任务
gulp.task('default', ['clean'], function() { 
    gulp.start('styles', 'scripts', 'images');
});
 
// 看守
gulp.task('watch', function() {
 
  // 看守所有.scss档
  gulp.watch('src/styles/**/*.scss', ['styles']);
 
  // 看守所有.js档
  gulp.watch('src/scripts/**/*.js', ['scripts']);
 
  // 看守所有图片档
  gulp.watch('src/images/**/*', ['images']);
 
  // 建立即时重整伺服器
  var server = livereload();
 
  // 看守所有位在 dist/  目录下的档案，一旦有更动，便进行重整
  gulp.watch(['dist/**']).on('change', function(file) {
    server.changed(file.path);
  });
 
});

注：pipe()是stream模块里传递数据流的一个方法，第一个参数为插件方法，插件会接收从上游流下的文件，进行处理加工后，再往下流。

gulp.task('任务名称',function(){
       return  gulp.src('文件路径')
                  .pipe(...)
                  .pipe(...)
                  //直到任务的最后一步
                 .pipe(...);
});

五、Gulp插件

1、gulp-gh-pages插件: 使用gulp来把markdown生成html文档并上传到git pages上

https://github.com/shinnn/gulp-gh-pages

var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');

gulp.task('deploy',function(){
        return  gulp.src('./dist/**/*')
                   .pipe(ghPages());
});

2、 gulp-jade插件: 将jade编译成html文件

3、gulp-less插件：将less编译成css文件

var gulp = require('gulp');
var less = require('gulp-less');
var  path = require('path');

gulp.task('less',function(){
       return gulp.src('./less/**/*.less')
                  .pipe(less({
                      path:[path.join(_dirname,'less','includes')]
                  }))
                  .pipe(gulp.dest('./public/css'));
});

4、 gulp-live-server插件：方便的，轻量级的服务器

var gulp = require('gulp');
var  gls = require('gulp-live-server');

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

     //1.serve with default settints
     var  server = gls.static();     //equals to gls.static('public',3000);

      server.start();

      //2.serve  at custom port 
      var server = gls.static('dist',8888);

       server.start();

       //3.serve multi folders
       var  server = gls.static(['dist','.tmp']);

        server.start();
 
        //use gulp.watch to trigger server action(notify,start or stop)

         gulp.watch(['static/**/*.css','static/**/*.html'],function(file){
               server.notify.apply(server,[file]);
        });
});

5、 gulp-livereload插件：可以实时保存刷新，那样就不用按F5和切换界面了

6、gulp-load-plugins插件: 在你的package.json文件中自动加载任意的gulp插件

npm install gulp-load-plugins --save-dev

例如package.json文件如下：

{

       “dependencies”:{
            "gulp-jshint":"*",
            "gulp-concat":"*"
       }
}

在gulpfile.js中添加如下代码：

var gulp = require('gulp');
var  gulpLoadPlugins = require('gulp-load-plugins');
var  plugins = gulpLoadPlugins();

plugins.jshint = require('gulp-jshint');
plugins.concat = require('gulp-concat');

7、 gulp-babel插件：

npm install gulp-babel babel-preset-es2015 --save-dev

使用方法：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default',()=>{
      return gulp.src('src/app.js')
                .pipe(babel({
                        presets:['es2015']
                   }))
                .pipe(gulp.dest('dist'));
});

说明：Babel是一个JS转换编译器，它可以将ES6转换为ES5。如上文的 const 和箭头方法。

官方github：https://github.com/gulpjs/gulp