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:  可能會被牆，使用下面方法安裝 ：

一、到下載 http://www.w3cplus.com/sassguide/install.html  這個文件sass-3.4.22.gem

二、ruby 命令行輸入 gem install ,而後把上面的文件拖到命令行，就會自動生成下面的命令：

>gem install C:\Users\Administrator\Desktop\sass-3.4.22.gem\sass-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的配置：

 1 {
 2   "name": "mcvideo",
 3   "version": "1.0.0",
 4   "description": "個人世界大神視頻集",
 5   "main": "glupfile 0.js",
 6   "dependencies": {},
 7   "devDependencies": {
 8     "browser-sync": "^2.13.0",
 9     "gulp": "^3.9.1",
10     "gulp-autoprefixer": "^3.1.0",
11     "gulp-clean-css": "^2.0.6",
12     "gulp-filter": "^4.0.0",
13     "gulp-livereload": "^3.8.1",
14     "gulp-sass": "^2.3.2",
15     "gulp-sourcemaps": "^2.0.0-alpha",
16     "gulp-uglify": "^1.5.3"
17   },
18   "scripts": {
19     "test": "echo \"Error: no test specified\" && exit 1"
20   },
21   "author": "teaism",
22   "license": "ISC"
23 }

 ps:  推薦創建package.json文件添加上要的插件後 直接在命令行 運行  npm install

 

配置gulpfiles.js

 

  1 var gulp = require('gulp'),
  2     sass = require('gulp-sass'), // 編譯scss
  3     cleanCss = require('gulp-clean-css'), // 壓縮css
  4     // copydir = require('copy-dir'),//文件拷貝
  5     imagemin = require('gulp-imagemin'),//圖片壓縮
  6     cache = require('gulp-cache'),//圖片壓縮緩存
  7     uglify = require('gulp-uglify'),// 壓縮js
  8     plumber = require('gulp-plumber'),//檢測錯誤
  9     autoprefixer = require('gulp-autoprefixer'),// 自動添加css前綴
 10     browserSync = require('browser-sync').create(), // 瀏覽器自動加載不需手動刷新,
 11     reload = browserSync.reload,
 12     gutil = require('gulp-util'),
 13     paths = require('gulp-watch-path'),//「一對一」編譯
 14     filter = require('gulp-filter'),
 15     sourcemaps = require('gulp-sourcemaps'); // 資源地圖
 16 
 17 // 須要編譯的文件base路徑
 18 var basepath = 'static/assets/*/*/';
 19 
 20 gulp.task('cleanCash', function (done) {//清除緩存
 21     return cache.clearAll(done);
 22 });
 23 
 24 function errrHandler( e ){
 25     // 控制檯發聲,錯誤時beep一下
 26     gutil.beep();
 27     gutil.log(e);
 28     this.emit('end');
 29 }
 30 
 31 // 複製dep目錄下的文件
 32 gulp.task('copydir', function() {
 33     gulp.src(['static/assets/dep/**/*.*']).pipe(gulp.dest('dist/static/assets/dep/'));
 34 });
 35 
 36 // sass編譯成css後自動添加前綴再壓縮css
 37 // gulp.task('sass', function(){ 
 38 //     gulp.src('static/assets/scss/*/*.scss')
 39 //         .pipe(sass())
 40 //         .pipe(gulp.dest('static/assets/css'))
 41 // })
 42 // gulp.task('cssmin', function(){ 
 43 //     gulp.src(basepath + '*.css')
 44 //         .pipe(plumber({errorHandler:errrHandler}))
 45 //         .pipe(sourcemaps.init({loadMaps: true}))
 46 //         .pipe(autoprefixer({
 47 //             browers:['Chrome > 44']
 48 //         }))
 49 //         .pipe(sourcemaps.write('../maps/static'))
 50 //         .pipe(gulp.dest('dist/static/assets/'))
 51 //         .pipe(browserSync.reload({stream: true}));
 52 // })
 53 
 54 
 55 // sass編譯成css後自動添加前綴再壓縮css
 56 gulp.task('sass', function(){ 
 57     gulp.src('static/assets/scss/*/*.scss')
 58         .pipe(plumber({errorHandler:errrHandler}))
 59         .pipe(sourcemaps.init({loadMaps: true}))
 60         .pipe(sass())
 61         .pipe(autoprefixer({
 62             browers:['Chrome > 44']
 63         }))
 64         .pipe(cleanCss())
 65         // .pipe(cleanCss({debug: false}, function (details) {
 66         //     console.log("error=" + details.errors + " :  path===" + details.path);
 67         // }))
 68         .pipe(sourcemaps.write('.././../maps/static'))
 69         .pipe(gulp.dest('dist/static/assets/css'))
 70         .pipe(browserSync.reload({stream: true}));
 71 })
 72 
 73 
 74 // 壓縮js
 75 gulp.task('jsmin', function(){
 76     // gulp.src('static/*/*/*.js')
 77     gulp.src('static/assets/**/*.js')
 78         .pipe(plumber({errorHandler:errrHandler}))
 79         .pipe(sourcemaps.init({loadMaps: true}))
 80             .pipe(uglify())
 81         .pipe(sourcemaps.write('../maps/static'))
 82         .pipe(gulp.dest('dist/static/assets/'));
 83 })
 84 
 85 // 壓縮圖片
 86 gulp.task('imagesmin', function(){
 87     // gulp.src('static/*/*/*.{png,jpg,gif,ico}')
 88     gulp.src(basepath + '*.{jpg,png,gif,ico}')
 89         .pipe(plumber({errorHandler:errrHandler}))
 90         .pipe(cache(imagemin()))
 91         .pipe(gulp.dest('dist/static/assets'));
 92 })
 93 
 94 // 瀏覽器自動加載不需手動刷新
 95 gulp.task('watch',['sass', 'jsmin'], function(){
 96     browserSync.init({
 97         proxy: 'http://localhost:8080/toll-static/src/login/platform.html',
 98        ui: {
 99             port: 8080,
100             weinre: {
101                 port: 9090
102             }
103         }
104     });
105     gulp.watch(basepath + '*.scss', ['sass']);
106     gulp.watch(basepath + '*.js', ['jsmin']);
107     gulp.watch('static/assets/dep/**/*.*', ['copydir']);
108     gulp.watch(basepath + '*.{png,jpg,gif,ico}', ['imagesmin']);
109     gulp.watch('src/*/*.html').on('change', reload);
110 })
111 
112 /*
113 監聽文件方法二：
114 
115 gulp.task("default", function(){
116     gulp.run('jsmin', 'sass');
117     // 監聽文件變化
118     gulp.watch('scss/*.scss', function(){
119         gulp.run('jsmin', 'sass');
120     })
121 })*/
122 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/