利用gulp打造前端集成开发环境一--介绍篇

[fredshare]

gulp介绍

• gulp是基于流的构建工具，把源文件倒入一个处理容器1（任务1），再倒入处理容器2（任务2）。。。最后倒入最终的容器（目标文件）
• 和grunt类似，不过grunt的io操作太频繁

  gulp安装

• 安装nodejs
• 安装gulp

     npm install -g gulp
     npm install --save-dev gulp

gulp的使用

 gulp的任务都是以插件的形式存在，以安装gulp-jshint为例

• 安装gulp-jshint

     npm install gulp-jshint --save-dev

• 创建gulpfile.js

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var paths = {
  scripts: 'js/**/*.js',
};
gulp.task('lint', function() {
  return gulp.src(paths.scripts)
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

• 执行

        gulp lint

其实安装gulp和gulp的插件都是使用node在本地进行安装的，会自动生成相应的目录。最主要的还是这个gulpfile.js。就相当于main函数，当执行gulp的时候，就会主动地去gulpfile.js中去执行相应的任务。

什么是src和pipe？

先看一个unix命令：cat gulpfile.js | wc -l 这是两个独立的命令，cat guplfile.js 表示获取gulpfile.js的内容，wc -l表示统计文件中的行数，中间用|分隔，表示前面命令的输出作为后面命令的输入。src就是获取源文件，pipe就是管道操作。

5个最常见的命令：

gulp.task(name, fn)定义一个任务 gulp.run(tasks...)尽可能多的并行运行多个task gulp.watch(glob, fn)当glob内容发生改变时，执行fn gulp.src(glob)返回一个可读的stream gulp.dest(glob)返回一个可写的stream

查看各个gulp插件的官网：https://www.npmjs.org/

前端集成开发环境

好了，介绍完了，gulp，我们来说说集成开发环境是什么？ 我个人是在看了张云龙的博客之后才对前端工程、前端集成开发环境有了一定的了解的。那么我所理解的前端集成开发环境是指 一套解决js自身三大缺陷的通用解决方案。前端语言有哪三大缺陷：

资源定位：获取任何开发中所使用资源的线上路径； 内容嵌入：把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中； 依赖声明：在一个文本文件内标记对其他资源的依赖关系；

前端集成开发环境的目标是：

代码部署 文件压缩 文件合并 文件加MD5戳 前端模块化开发 组合插件 css sprite less开发 内容嵌入 支持less编译css 支持react

我的项目最终的gulpfile如下

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    md5 = require('gulp-md5-plus'),
    seajs = require('gulp-seajs'),
    replace = require('gulp-replace'),
    minifyCss = require('gulp-minify-css'),
    less = require('gulp-less'),
    cli = require('./cli.js'),  
    htmlmin = require('gulp-htmlmin'),
    jshint = require('gulp-jshint'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    cache = require('gulp-cache'),
    react = require('gulp-react'),
    newDep = require('gulp-dep');


//变量设置
var jsPath = {
    src : '../static/src/scripts',
    release : '../static/release/scripts'
},cssPath = {
    src : '../static/src/styles',
    release : '../static/release/styles'
},htmlPath = {
    src : '../application/views',
    release : '../application/views/'
},imgPath = {
    src : '../static/src/images',
    release : '../static/release/images/'
};

//默认执行方法
gulp.task('default',["main"],function(){

});


process.on('uncaughtException', function(err) {
    console.log(err);
})

//html处理,处理<!--script-->等标签
gulp.task('htmldep',function(){
    gulp.src(htmlPath.src + '/**/*.php')
        .pipe(newDep())
        .pipe(gulp.dest(htmlPath.release));
})
//html压缩
gulp.task('htmlmin',function(){
    gulp.src([htmlPath.src + '/m3/channel/index.php',"!" + htmlPath.src + 'apiview.php'])
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(htmlPath.release + '/m3/channel/'));
})
//移动lib任务
gulp.task('libmove',function(){
    //移动lib第三方库  不压缩
    gulp.src(jsPath.src + '/library/**/*.js')
        .pipe(gulp.dest(jsPath.release + '/library/'));
})
//移动common、mobile、www业务库，seajs处理、压缩
gulp.task('jsmin',function(){
    gulp.src([jsPath.src + '/**/*.js', "!" + jsPath.src + "/library/**/*.js"])
        .pipe(seajs())
        .pipe(uglify({
            mangle:true
        }))
        .pipe(gulp.dest(jsPath.release));
})
//css压缩、移动
gulp.task('cssmin',function(){
    gulp.src(cssPath.src + '/**/*.css')
        //.pipe(less()) //less编译
        .pipe(minifyCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(cssPath.release));
})
//css的less编译
gulp.task('less',function(){
    gulp.src(cssPath.src + '/**/*.less')
        .pipe(less()) //less编译
        .pipe(minifyCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(cssPath.release));
})
//图片压缩
gulp.task('imgmin',function(){
    gulp.src(imgPath.src + '/**/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            optimizationLevel: 5,
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        })))
        .pipe(gulp.dest(imgPath.release));
});

//react 
gulp.task('react-dev',['htmldep'],function(){
    gulp.src(jsPath.src + '/**/react-test.js')
        .pipe(react())
        .pipe(gulp.dest(jsPath.release))
})
//react 
gulp.task('react-idc',['htmldep'],function(){
    gulp.src(jsPath.src + '/**/react-test.js')
        .pipe(react())
        .pipe(uglify({
            mangle:true
        }))
        .pipe(gulp.dest(jsPath.release))
})
//react
gulp.task('main',['htmldep','libmove','jsmin','cssmin','less'],function() {

});

//监听任务
gulp.task('watch', function() { 
    gulp.watch([jsPath.src + '/**/*.js', "!" + jsPath.src + "/library/**/*.js"]).on('change', function(event) {
        /*var dir = event.path.match(/\/src\/(styles|scripts)(.*)\/.*\.(css|js)$/)[2];
        console.log(event.path);
        console.log(dir);
        gulp.src(event.path)
            .pipe(seajs())
            .pipe(gulp.dest(jsPath.release + dir));*/
        console.log('files changed');
        gulp.src([jsPath.src + '/**/*.js', "!" + jsPath.src + "/library/**/*.js"])
            .pipe(seajs())
            .pipe(gulp.dest(jsPath.release));
    });
});

[yyman001]

百度的fis集成有资源定位http://fis.baidu.com/docs/more/fis-standard-location.html#在js中定位资源 但在gulp中暂没找到实现方法,如果有,也可能只是替换文件内容的方法吧~