glup基本操作

前段工程化就是一个(工具)使整个前端流程和写代码不相关的事情变成一个js文件,执行的时候,自动的利用这些工具,最终得到需要的结果,需要配置

glup

• 它是一款nodejs应用。
• 它是打造前端工作流的利器，打包、压缩、合并、git、远程操作...，
• 简单易用
• 无快不破
• 高质量的插件
• ....

glup安装

$ npm install --global gulp-cli

$ npm install --save-dev gulp

安装各种插件

    npm install --save gulp            //本地使用gulp
    npm install --save gulp-imagemin   //压缩图片
    npm install --save gulp-minify-css //压缩css
    npm install --save gulp-ruby-sass  //sass
    npm install --save gulp-jshint     //js代码检测
    npm install --save gulp-uglify     //js压缩
    npm install --save gulp-concat     //文件合并
    npm install --save gulp-rename     //文件重命名
    npm install --save png-sprite      //png合并
    npm install --save gulp-htmlmin    //压缩html
    npm install --save gulp-clean      //清空文件夹
    npm install --save browser-sync    //文件修改浏览器自动刷新
    npm install --save gulp-shell      //执行shell命令
    npm install --save gulp-ssh        //操作远程机器
    npm install --save run-sequence    //task顺序执行

创建glupfile.js

# 示例1
var gulp = require('gulp');
var pug = require('gulp-pug');
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('html', function(){
  return gulp.src('client/templates/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('build/html'))
});

gulp.task('css', function(){
  return gulp.src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});

gulp.task('js', function(){
  return gulp.src('client/javascript/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'))
});

gulp.task('default', [ 'html', 'css', 'js' ]);

glup 语法

• glup.src() 转化的文件

gulp.src(globs[, options])
globs : String or Array

glup.src('client/template/*.jade')
    .pipe(jade())
    .pipe(minify())
    .pipe(glup.dest('build/minifiled_templates'))

// 示例
client/
  a.js
  bob.js
  bad.js
glup.src(['client/*.js', '!client/b*.js', 'client/bad.js']) 
// 要所有.js结尾的文件, 不要以b开头的 , 要bad.js

• glup.dest() 数据流变成文件

gulp.dest(path[, options])
path: String or Function

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))  // 路径
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));  // 放置路径

• glup.task() 声明一个任务

gulp.task(name [, deps, fn])
name: String 不应该有空格
deps: Array
fn: Function

gulp.task('somename', function() {
  // Do ...
});
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // Do stuff
});

• glup.watch() 监控文件的变动

gulp.watch(glob[, opts], tasks)
glob: String or Array
tasks: Array

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

glup使用案例

• demo1目录结构如下。把demo1中的 index.html压缩，把src里面的less编译、合并、压缩、重命名、存储到dist。src里面的图片压缩、合并存储到dist。src里面的js做代码检查，压缩，合并，存储到dist。

    + demo1
        + dist
            + css
                - merge.min.css
            + js
                - merge.min.js
            + imgs
                - 1.png
                - 2.png
            - index.html
        + src
            + css
                - a.css
                - b.css
            + js
                - a.js
                - b.js
            + imgs
                - 1.png
                - 2.png
            - index.html

    # glupfile.js
    var gulp = require('gulp');
    // 引入组件
    var minifycss = require('gulp-minify-css'), // CSS压缩
        uglify = require('gulp-uglify'), // js压缩
        concat = require('gulp-concat'), // 合并文件
        rename = require('gulp-rename'), // 重命名
        clean = require('gulp-clean'), //清空文件夹
        minhtml = require('gulp-htmlmin'), //html压缩
        jshint = require('gulp-jshint'), //js代码规范性检查
        imagemin = require('gulp-imagemin'); //图片压缩


    gulp.task('html', function() {
      return gulp.src('src/*.html')
        .pipe(minhtml({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
    });

    gulp.task('css', function(argument) {
        gulp.src('src/css/*.css')
            .pipe(concat('merge.css'))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(minifycss())
            .pipe(gulp.dest('dist/css/'));
    });
    gulp.task('js', function(argument) {
        gulp.src('src/js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(concat('merge.js'))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(uglify())
            .pipe(gulp.dest('dist/js/'));
    });

    gulp.task('img', function(argument){
        gulp.src('src/imgs/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/imgs'));
    });

    gulp.task('clear', function(){
        gulp.src('dist/*',{read: false})
            .pipe(clean());
    });

    gulp.task('build', ['html', 'css', 'js', 'img']);

$ glup build