gulp实践

gulp 简介

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

gulp 安装及常见问题

1. 安装gulp

1	npm install -g gulp

如果报Error: EACCES, open ‘/Users/xxx/xxx.lock错误。先执行：sudo chown -R $(whoami) $HOME/.npm;

如果使用npm安装插件太慢（被墙），可执行 npm install -g cnpm –registry=https://registry.npm.taobao.org,先安装cnpm, 之后再安装插件时用cnpm安装cnpm install gulp

2. 安装各种插件

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-less       //less　
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顺序执行

附加插件：yargs获取的参数判断是开发打包还是生产打包，lodash用于操作数组，path用于写路径.

1
2
3

npm install --save yargs　
npm install --save lodash
npm install --save path

或者根据package.json 自动安装。把package.json拷贝到自己的工程目录下，进入目录，执行:npm install

gulp 使用案例

所有代码在：https://github.com/opensmarty

范例1:

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

gulpfile.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());
});

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

执行：

1	gulp build;

可实现src目录下的html压缩，css、js合并压缩，图片压缩，最后放入 dist目录下

范例2:

监控项目文件变动，自动刷新浏览器，本地调试，并且把本地代码同步到远程服务器

var gulp = require('gulp');
// 引入组件
var browserSync = require('browser-sync').create();   //用于浏览器自动刷新
var scp = require('gulp-scp2');                       //用于scp到远程机器
var fs = require('fs');
gulp.task('reload', function(){
    browserSync.reload();
});
gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: "./src"
        }
    });
    gulp.watch(['**/*.css', '**/*.js', '**/*.html'], ['reload', 'scp']);
});
gulp.task('scp', function() {
    return gulp.src('src/**/*')
        .pipe(scp({
            host: '121.40.201.213',
            username: 'root',
            privateKey: fs.readFileSync('/Users/wingo/.ssh/id_rsa'),
            dest: '/var/www/fe.jirengu.com',
            watch: function(client) {
                client.on('write', function(o) {
                    console.log('write %s', o.destination);
                });
            }
        }))
        .on('error', function(err) {
            console.log(err);
        });
});

执行：

1 2	gulp scp; // 可把本地开发环境代码拷贝到服务器 gulp server; //可在本地创建服务器，本地开发浏览器立刻刷新

范例3:

监控项目文件变动，自动压缩、合并、打包、添加版本号

html

</html>
<head>
<!-- build:css css/merge.css -->
<link href="css/a.css" rel="stylesheet">
<link href="css/b.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<p>demo1-工程化手动版</p>
<!-- build:js js/merge.js -->
<script type="text/javascript" src="js/a.js"></script>
<script type="text/javascript" src="js/b.js"></script>
<!-- endbuild -->
</body>
</html>

gulpfile.js

var gulp = require('gulp');
var rev = require('gulp-rev');   //添加版本号
var revReplace = require('gulp-rev-replace');  //版本号替换
var useref = require('gulp-useref');   //解析html资源定位
var filter = require('gulp-filter');   //过滤数据
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');      //css优化压缩
var clean = require('gulp-clean');
gulp.task("index", ['clear'], function() {
  var jsFilter = filter("**/*.js", {restore: true});
  var cssFilter = filter("**/*.css", {restore: true});
  var userefAssets = useref.assets();
  return gulp.src("src/index.html")
    .pipe(userefAssets)      // Concatenate with gulp-useref
    .pipe(jsFilter)
    .pipe(uglify())             // Minify any javascript sources
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(csso())               // Minify any CSS sources
    .pipe(cssFilter.restore)
    .pipe(rev())                // Rename the concatenated files
    .pipe(userefAssets.restore())
    .pipe(useref())
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('dist'));
});
gulp.task('clear', function(){
    gulp.src('dist/*',{read: false})
        .pipe(clean());
});

范例4:

本地shell命令，远程shell，任务顺序执行…

var gulp = require('gulp');
var shell = require('gulp-shell');
var runSequence = require('run-sequence');
var fs = require('fs');
var GulpSSH = require('gulp-ssh');
//shell操作,
gulp.task('git', shell.task(['git add .', 'git commit -am "dd"', 'git push -u origin dev']));
gulp.task('clear', shell.task(['find . -name ".DS_Store" -depth -exec rm {} \\;']));
//操作远程主机
var gulpSSH = new GulpSSH({
    ignoreErrors: false,
    sshConfig: {
        host: '121.40.201.213',
        port: 22,
        username: 'root',
        privateKey: fs.readFileSync('/Users/wingo/.ssh/id_rsa')
    }
});
gulp.task('remote', function() {
    return gulpSSH
        .shell(['cd /var/www/fe.jirengu.com', 'git pull origin dev', 'rm -rf _runtime']);
});
gulp.task('build', function(callback) {
    runSequence(
        'git',
        'clear',
        'remote',
        callback
    );
});
gulp.task('watch', function() {
    gulp.watch(['**/*.css', '**/*.js', '**/*.html', '**/*.php'], ['build']);
});

本文有任何错误，或有任何疑问，欢迎留言说明。

邮箱: opensmarty@163.com
QQ: 1327400982

Reference links

gulp入门教程