gulp + sass + gulpPlugins learning

前言

每安装一个记得查看版本，可看是否安装成功。

安装流程：

node—ruby—gulp—sass—gulp plugins—config gulpfile.js

安装node

到http://nodejs.cn/(中文版^_^)下载并安装；

如此npm也会一并安装了npm常用命令[http://javascript.ruanyifeng.com/nodejs/npm.html]。

command line:

node -v

npm -v

 

安装ruby

下载并安装ruby: http://rubyinstaller.org/downloads  。

如此gem也会一并安装了。

command line:

ruby -v

gem -v

 

安装gulp

首先全局安装gulp；

ruby cammand line: 

npm init 自动初始化package.json文件

npm install -g gulp

然后再到项目中项目安装 gulp；

ruby cammand line: 

npm install (--save-dev) gulp

说明：--save-dev 会自动添加配置在package.json依赖文件中,so最好加上。

--save参数表示将该模块写入dependencies属性，--save-dev表示将该模块写入devDependencies属性。

安装sass

ruby cammand line:

gem install sass

查看版本确认是否安装成功；

command line:

sass -v

ps:  可能会被墙，使用下面方法安装 ：

1、到下载 http://www.w3cplus.com/sassguide/install.html  这个文件sass-3.4.22.gem

2、ruby 命令行输入 gem install ,然后把上面的文件拖到命令行，就会自动生成下面的命令：

>gem install C:\Users\Administrator\Desktop\sass-3.4.22.gem\sass-3.

3、这就成功了。

参考： http://www.w3cplus.com/sassguide/install.html

 

安装插件之前可以 ：  npm  update 来更新一下。

安装gulp plugins

("gulp-autoprefixer": "^3.1.0",

"gulp-clean-css": "^2.0.6",
"gulp-minify-css": "^1.2.4",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^2.0.0-alpha",
"gulp-uglify": "^1.5.3")

ruby cammand line:

npm install --save-dev gulp-sass

npm pluginsname -v (查看版本)

如下代码为package.json的配置：

{
  "name": "mcvideo",
  "version": "1.0.0",
  "description": "我的世界大神视频集",
  "main": "glupfile 0.js",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.13.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-clean-css": "^2.0.6",
    "gulp-filter": "^4.0.0",
    "gulp-livereload": "^3.8.1",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-uglify": "^1.5.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "teaism",
  "license": "ISC"
}

 ps:  推荐建立package.json文件添加上要的插件后 直接在命令行 运行  npm install

 

配置gulpfiles.js

 

var gulp = require('gulp'),
    sass = require('gulp-sass'), // 编译scss
    cleanCss = require('gulp-clean-css'), // 压缩css
    // copydir = require('copy-dir'),//文件拷贝
    imagemin = require('gulp-imagemin'),//图片压缩
    cache = require('gulp-cache'),//图片压缩缓存
    uglify = require('gulp-uglify'),// 压缩js
    plumber = require('gulp-plumber'),//检测错误
    autoprefixer = require('gulp-autoprefixer'),// 自动添加css前缀
    browserSync = require('browser-sync').create(), // 浏览器自动加载不需手动刷新,
    reload = browserSync.reload,
    gutil = require('gulp-util'),
    paths = require('gulp-watch-path'),//“一对一”编译
    filter = require('gulp-filter'),
    sourcemaps = require('gulp-sourcemaps'); // 资源地图

// 需要编译的文件base路径
var basepath = 'static/assets/*/*/';

gulp.task('cleanCash', function (done) {//清除缓存
    return cache.clearAll(done);
});

function errrHandler( e ){
    // 控制台发声,错误时beep一下
    gutil.beep();
    gutil.log(e);
    this.emit('end');
}

// 复制dep目录下的文件
gulp.task('copydir', function() {
    gulp.src(['static/assets/dep/**/*.*']).pipe(gulp.dest('dist/static/assets/dep/'));
});

// sass编译成css后自动添加前缀再压缩css
// gulp.task('sass', function(){ 
//     gulp.src('static/assets/scss/*/*.scss')
//         .pipe(sass())
//         .pipe(gulp.dest('static/assets/css'))
// })
// gulp.task('cssmin', function(){ 
//     gulp.src(basepath + '*.css')
//         .pipe(plumber({errorHandler:errrHandler}))
//         .pipe(sourcemaps.init({loadMaps: true}))
//         .pipe(autoprefixer({
//             browers:['Chrome > 44']
//         }))
//         .pipe(sourcemaps.write('../maps/static'))
//         .pipe(gulp.dest('dist/static/assets/'))
//         .pipe(browserSync.reload({stream: true}));
// })


// sass编译成css后自动添加前缀再压缩css
gulp.task('sass', function(){ 
    gulp.src('static/assets/scss/*/*.scss')
        .pipe(plumber({errorHandler:errrHandler}))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sass())
        .pipe(autoprefixer({
            browers:['Chrome > 44']
        }))
        .pipe(cleanCss())
        // .pipe(cleanCss({debug: false}, function (details) {
        //     console.log("error=" + details.errors + " :  path===" + details.path);
        // }))
        .pipe(sourcemaps.write('.././../maps/static'))
        .pipe(gulp.dest('dist/static/assets/css'))
        .pipe(browserSync.reload({stream: true}));
})


// 压缩js
gulp.task('jsmin', function(){
    // gulp.src('static/*/*/*.js')
    gulp.src('static/assets/**/*.js')
        .pipe(plumber({errorHandler:errrHandler}))
        .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(uglify())
        .pipe(sourcemaps.write('../maps/static'))
        .pipe(gulp.dest('dist/static/assets/'));
})

// 压缩图片
gulp.task('imagesmin', function(){
    // gulp.src('static/*/*/*.{png,jpg,gif,ico}')
    gulp.src(basepath + '*.{jpg,png,gif,ico}')
        .pipe(plumber({errorHandler:errrHandler}))
        .pipe(cache(imagemin()))
        .pipe(gulp.dest('dist/static/assets'));
})

// 浏览器自动加载不需手动刷新
gulp.task('watch',['sass', 'jsmin'], function(){
    browserSync.init({
        proxy: 'http://localhost:8080/toll-static/src/login/platform.html',
       ui: {
            port: 8080,
            weinre: {
                port: 9090
            }
        }
    });
    gulp.watch(basepath + '*.scss', ['sass']);
    gulp.watch(basepath + '*.js', ['jsmin']);
    gulp.watch('static/assets/dep/**/*.*', ['copydir']);
    gulp.watch(basepath + '*.{png,jpg,gif,ico}', ['imagesmin']);
    gulp.watch('src/*/*.html').on('change', reload);
})

/*
监听文件方法二：

gulp.task("default", function(){
    gulp.run('jsmin', 'sass');
    // 监听文件变化
    gulp.watch('scss/*.scss', function(){
        gulp.run('jsmin', 'sass');
    })
})*/
gulp.task('default', ['cleanCash', 'sass', 'jsmin', 'copydir',  'imagesmin', 'watch']);

 

 

 

 

congratulation 执行

ruby cammand line:

gulp TASK

 ？gulp -s后者gulp default -s  ？

一些命令：

gulp  -T     查看任务列表

 

// -w: 实时监听
// -s: 启动服务器
// -p: 服务器启动端口，默认8080

 

 

 

 

 

 

 

 参考：

browsersync: http://www.browsersync.cn/

gulp-plugins: http://gulpjs.com/plugins/