源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

基于Node.js的JavaScript项目构建工具gulp的使用教程

  • 时间:2020-12-02 01:54 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:基于Node.js的JavaScript项目构建工具gulp的使用教程
npm install gulp --save-dev 
[b]什么是gulp? [/b]gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具,像Bower,Yeoman,Grunt等。 [b]gulp和grunt的异同点 [/b]易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。 高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。 高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。 易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。 因为gulp是用node.js写的,所以你需要在你的终端上安装好npm。npm是node.js的包管理器,所以先在你的机子上安装好node.js吧。 [b]gulp安装命令[/b]
sudo npm install -g gulp
在根目录下新建package.json文件
npm init .
[b]安装gulp包[/b] 安装好后再次输入gulp -v查看版本号,如下图显示则为成功: [img]http://files.jb51.net/file_images/article/201605/2016520182145165.jpg?2016420182153[/img] [b]安装插件 [/b]安装常用插件: 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) 安装这些插件需要运行如下命令:
[u]复制代码[/u] 代码如下:
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
-save和-save-dev可以省掉你手动修改package.json文件的步骤。
npm install module-name -save
 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev 
自动把模块和版本号添加到devdependencies部分 [b]gulp命令 [/b]你仅仅需要知道的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', function () {...});
gulp.task这个API用来创建任务,在命令行下可以输入$ gulp [default],(中括号表示可选)来执行上面的任务。 gulp官方API文档:https://github.com/gulpjs/gulp/blob/master/docs/API.md gulp 插件大全:http://gulpjs.com/plugins/ [b]开始构建项目 [/b]在项目根目录下新建一个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 --save-dev gulp-uglify
npm install --save-dev gulp-rename
以我的为例,进入gulpfile.js所在目录:
cd /Users/trigkit4/gulp-test
然后输入:
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'));
});

该命令会安装package.json下的全部依赖,如下图所示: [img]http://files.jb51.net/file_images/article/201605/2016520182629058.jpg?2016420182643[/img] [b]完整的gulpfile.js [/b]
// 载入外挂
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(...);
});
[b]gulp插件 [/b]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());

});

gulp-jade插件:将jade编译成html文件 gulp-less插件:将less编译成css文件
var less = require('gulp-less');

var path = require('path');

 

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

 return gulp.src('./less/**/*.less')

  .pipe(less({

   paths: [ path.join(__dirname, 'less', 'includes') ]

  }))

  .pipe(gulp.dest('./public/css'));

});
gulp-live-server 插件:方便的,轻量级的服务器

var gulp = require('gulp');

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

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

 //1. serve with default settings

 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 actions(notify, start or stop)

 gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) {

  server.notify.apply(server, [file]);

 });

});

gulp-livereload,可以实时保存刷新,那样就不用按F5和切换界面了 gulp-load-plugins:在你的package.json文件中自动加载任意的gulp插件
$ npm install --save-dev gulp-load-plugins
例如一个给定的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');

gulp-babel:gulp 的babel插件,
$ npm install --save-dev gulp-babel babel-preset-es2015
使用方法:
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'));
});

官方github: https://github.com/gulpjs/gulp
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部