glup安装与使用

提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。 
1.打开命令行窗口，输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

获取到cnpm以后，输入下面的命令，都用cnpm不需要用$ npm;

cnpm install -g gulp  //全局安装
cnpm install --save-dev gulp   //本地安装，只是开发版的依赖
cnpm install --save-dev browser-sync

browser-sync是一个十分好用的浏览器同步测试工具。

若出现这样的问题：

则继续安装：

cnpm install gulp-imagemin

 

package.json

{
  "devDependencies": {
    "browser-sync": "^2.23.6",
    "gulp": "^3.9.1",
    "gulp-cache": "^1.0.1",
    "gulp-clean": "^0.3.2",
    "gulp-file-include": "^1.2.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-jshint": "^2.0.4",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-replace-name": "^1.0.1",
    "gulp-tinypng-nokey": "^1.1.0",
    "gulp-uglify": "^2.0.0",
    "jshint": "^2.9.4"
  }
}

gulpfile.js

// 载入插件
var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),//浏览器刷新工具
    imagemin = require('gulp-imagemin'),//图片压缩
    tinypng = require('gulp-tinypng-nokey');//tinypng图片压缩
    minifycss = require('gulp-minify-css'),//css压缩
    uglify = require('gulp-uglify'),//js压缩
    jshint = require('gulp-jshint'),//js语法检测
    rename = require('gulp-rename'),//重命名
    gclean = require('gulp-clean'),//清除文件
    minimist = require('minimist'),//截取传参
    cache = require('gulp-cache'),//获取文件cache
    replaceName = require('gulp-replace-name'),//修改文件名
    fileinclude  = require('gulp-file-include');//静态资源引用

// 获取配置参数
var options = minimist(process.argv.slice(2));

/*html实时预览*/
gulp.task('server', function() {
    if(options.url){
        var url=options.url;
        console.log('文件路径：'+url);
        browserSync.init({
            server: {
                baseDir: './'+url
            }
        });
        //监听文件变化数组
        gulp.watch([url+'/*.*',url+'/**/*.*']).on("change", browserSync.reload);
    }else{
        console.log('配置参数错误;例：gulp server --url demo/abc');
    }
});

/*html-file实时预览*/
gulp.task('tplserver',['tplout'], function() {
    console.log('为了调试方便建议分三层目录：dist(模版合并后输出目录)、src(开发目录)、statics(静态资源js/css/img)');
    console.log('html:@@include("tpl_header.html");公共模版文件夹名称：tpl');
    console.log('输出地址访问+：/dist/');
    if(options.url){
        var url=options.url;
        console.log('文件路径：'+url);
        browserSync.init({
            server: {
                baseDir: './'+url
            }
        });
        gulp.watch([url+'/**/*.*',url+'/**/*.*',url+'/*.*','!'+url+'/dist/*.*','!'+url+'/dist/**/*.*'],['tplout']).on("change", browserSync.reload);
    }else{
        console.log('配置参数错误;例：gulp tplserver --url demo/abc');
    }  
});
// 模版载入输出，默认输出到dist目录，模版文件tpl_开头
gulp.task('tplout', function() {
    console.log(options.url);
    if(options.url){
        gulp.src([options.url+'/src/*.html',options.url+'/src/**/*.html','!'+options.url+'/src/tpl/*.html'])
            .pipe(fileinclude({
              prefix: '@@',
              basepath: '@file'
            }))
        .pipe(gulp.dest(options.url+'/dist'));
    }else{
        console.log('配置参数错误;例：gulp tplout --url demo/abc');
    }  
});

//IMG压缩 支持GIF、PNG、JPG压缩率不高
gulp.task('imagemin',function(){
    if(options.url){
        var thisUrl = options.url;
        console.log('压缩地址路径：'+thisUrl);
        gulp.src([thisUrl+'/*.{gif,png,jpg,jpeg}',thisUrl+'/**/*.{gif,png,jpg,jpeg}'])
        .pipe(imagemin())
        .pipe(gulp.dest(thisUrl));
    }else{
        console.log('配置参数错误;例：gulp imagemin --url demo');
    }   
});

// 图片压缩tinypng，api请求速度会慢点;只能压缩PNG和JPG
gulp.task('picmin', function () {
    if(options.url){
        var thisUrl = options.url;
        console.log('压缩地址路径：'+thisUrl);
        gulp.src([thisUrl+'/*.{png,jpg,jpeg}',thisUrl+'/**/*.{png,jpg,jpeg}'])
            .pipe(cache(tinypng()))
            .pipe(gulp.dest(thisUrl));
    }else{
        console.log('配置参数错误;例：gulp picmin --url demo/abc');
    }
});
 
// css压缩
gulp.task('cssmin', function() {
    if(options.url){
        var thisUrl=options.url;
        console.log('压缩地址路径：'+thisUrl);
        gulp.src([thisUrl+'/*.css',thisUrl+'/**/*.css','!'+thisUrl+'/**/*.min.css'])
        .pipe(minifycss())  //执行压缩
        .pipe(rename({suffix: '.min'}))   //重命名
        .pipe(gulp.dest(thisUrl));  //输出文件夹
    }else{
        console.log('配置参数错误;例：gulp cssmin --url demo/abc');
    }
});
// js压缩
gulp.task('jsmin', function() {
    if(options.url){
        var thisUrl=options.url;
        console.log('压缩地址路径：'+thisUrl);
        gulp.src([thisUrl+'/**/*.js',thisUrl+'/*.js','!'+thisUrl+'/**/*.min.js'])
        .pipe(jshint()) //js语法检测
        .pipe(uglify())  //执行压缩
        .pipe(rename({suffix: '.min'}))   //重命名
        .pipe(gulp.dest(thisUrl));  //输出文件夹
    }else{
        console.log('配置参数错误;例：gulp jsmin --url demo/abc');
    }
});
// 全部压缩
gulp.task('allmin', function(){
    gulp.start('cssmin', 'jsmin', 'picmin');
});

// 修改名字rname
gulp.task('rname', function() {
    if(options.url){
        var thisUrl=options.url;
        gulp.src([thisUrl+'/m_*.php',thisUrl+'/**/m_*.php'])
        .pipe(replaceName(/m_/g, 'mip_'))   //重命名
        .pipe(gulp.dest(thisUrl));  //输出文件夹
        gulp.src([thisUrl+'/m_*.php',thisUrl+'/**/m_*.php']).pipe(gclean())
    }else{
        console.log('配置参数错误;例：gulp rname --url demo/abc');
    }
});

项目目录