1. 程式人生 > >24、gulp給css3加字首

24、gulp給css3加字首

安裝兩個依賴gulp-autoprefixer和browserslist,然後改變package.json檔案和gulpfile檔案

package.json:

{
  "name": "01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server --content-base ./ --port 8080",
    "build": "gulp build && webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "browserslist": "^2.1.0",
    "css-loader": "^0.28.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-csso": "^3.0.0",
    "gulp-less": "^3.3.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4"
  }
  ,"browserslist": [
       "Chrome > 1",
       "Firefox > 1",
       "Opera  > 1",
       "ie >= 6",
       "Edge >= 9"
    ]
}

gulpfile檔案:

var path = require('path');
var gulp = require('gulp');
var less = require('gulp-less');
var csso = require('gulp-csso');
var concat = require('gulp-concat');
var fs = require("fs");
var autoprefixer = require('gulp-autoprefixer');
 
//https://www.npmjs.com/package/gulp-less
//定義了一個任務叫做less
gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(gulp.dest('./css'));
});


//定義了一個合併任務 
gulp.task('cssconcat', function() {
  return gulp.src('./css/**/*.css')
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./dist/'));
});

//定義一個刪除資料夾的任務,NodeJS規定只能刪除空資料夾,這裡使用了遞迴來迴圈刪除
gulp.task("clean",function(){
    var deleteFolder = function(path) {
    	var files = [];
    	if( fs.existsSync(path) ) {
        	files = fs.readdirSync(path);
        	files.forEach(function(file,index){
            	var curPath = path + "/" + file;
            	if(fs.statSync(curPath).isDirectory()) { // recurse
                	deleteFolder(curPath);
            	} else { // delete file
               	 fs.unlinkSync(curPath);
           	 	}
       		 });
        	fs.rmdirSync(path);
    	}
	};

	deleteFolder("./css")
});

//工作流
gulp.task("dev",["less"]);
gulp.task("build",["less" , "cssconcat" , "clean"]);

//監聽
gulp.watch('./less/**/*.less' , ["dev"]);

相關推薦

24gulpcss3字首

安裝兩個依賴gulp-autoprefixer和browserslist,然後改變package.json檔案和gulpfile檔案 package.json: { "name": "01", "version": "1.0.0", "description"

vue-cli中 css3字首

看了在utils.js檔案下新增修改 //postcss: generateLoaders('postcss'), postcss:[require('autoprefixer') ({ browsers: ['last 10 Chrome versions', 'last 5 Fi

做完小程序項目老板了6k薪資~

大神 param 中秋節 .sh 參數 gem ext [1] 框架   大家好,這裏是@IT·平頭哥聯盟,我是首席填坑官——蘇南(South·Su),今天要給大家分享的是最近公司做的一個小程序項目,過程中的一些好的總結和遇到的坑,希望能給其他攻城獅帶來些許便利,更希望能

(13/24) css進階:自動處理css3屬性字首

什麼是屬性字首 為了瀏覽器的相容性,有時候我們必須加入-webkit,-ms,-o,-moz這些字首。目的就是讓我們寫的頁面在每個瀏覽器中都可以順利執行。 例如: transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webki

gulp 自動化構建 less編譯css補全瀏覽器字首js壓縮瀏覽器自動重新整理

最近的時間都在使用框架寫專案,閒來無聊把gulp又回顧了一遍,使用起來還是很方便的。 這裡是我的專案結構 這裡我主要實現了less編譯、css補全瀏覽器字首、js壓縮、瀏覽器自動重新整理幾項常用的功能。 第一步、全域性安裝 gulp npm install gu

Flutter 實現不同樣式(有樣式) 的TextField (可自定義),類似微博#話題#@使用者,(TextFieldTextSpan)

描述 先上效果圖 在專案中,有 @ 和 話題功能,需要在編輯時即可回顯,但是官方原生的TextField不支援對部分文字定義不同的樣式,所以封裝了一個。 注意:這不是富文字外掛,不支援在輸入框中顯示圖片,僅是 TextField 的擴充套件,讓其支援自定義 TextSpan。 本文介紹封裝思路,如果想要直

九:請求斷言

enc .org ref assertion cnblogs sample display lin manual 參考:http://jmeter.apache.org/usermanual/component_reference.html#assertions 背景 在測

24劍指offer--二叉樹中和為某一值的路徑

val 遍歷 描述 所有 oid res bold eno bsp 題目描述 輸入一顆二叉樹和一個整數,打印出二叉樹中結點值的和為輸入整數的所有路徑。路徑定義為從樹的根結點開始往下一直到葉結點所經過的結點形成一條路徑。 解題思路:本題采用先序遍歷,遍歷到葉子節點,如果和

ps技術--批量圖片水印

photos strong http jpg 記錄 介紹 可見 出現 同一文件   在日常的辦公過程中,對於一些比較重要的文件的掃描件需要特殊處理,這時我們就需要給它們加上水印,保證它們的用途唯一,而這些掃描件很多,不可能一一給他們加水印,所以為提高工作效率,我們就可以使用

php圖片文字水印

img black rom filename 這不 data- 等等 con rac <?php /*給圖片加文字水印的方法*/ $dst_path = ‘http://f4.topitme.com/4/15/11/1166351597fe111154l.jpg‘

淺談如何正確table邊框

too text 不同 只需要 mage 徹底 邊線 包括 -1 一般來說,給表格加邊框都會出現不同的問題,以下是給表格加邊框後展現比較好的方式 <style> table,table tr th, table tr td { border:

hystrix 方法斷路器

rest tar mapping end sca over ice disco 啟動 添加依賴 <dependency> <groupId>org.springframework.cloud</groupId> <

gulp-rev 添版本號

node nal lec nod exp reg spl lena ffi 打開node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新為: manifest[origi

java基礎學習——24容器

truct 每次 封裝 arc title right 先來 hit itblog Java中有一些對象被稱為容器(container)。容器中可以包含多個對象,每個對象稱為容器中的一個元素。容器是用對象封裝的數據結構(data structure)。 充滿夢想的容器

24覆蓋equals時請遵守通用約定

一致性 覆蓋 調用 null 情況 多次調用 als 沒有 信息 覆蓋equals方法看似很簡單,但是有許多覆蓋方式會導致錯誤,並且後果非常嚴重。最容易的避免這類問題的方法就是不覆蓋equals方法,這種情況下,每個實例都與它自身相等。 如果你必須覆蓋equals方法,那麽

24嵌合體序列

earch htm ima ase oss 組成 figure 完全 ati 轉載:http://www.cnblogs.com/xudongliang/p/6497465.html 嵌合體序列:由來自兩條或者多條模板鏈的序列組成,示意圖如下: 在PCR反應中,在延伸階段

24sam- 詳解 https://davetang.org/wiki/tiki-index.php?page=SAM

sco tran lis string轉換 similar in use 位置 rac tro 編輯距離Edit Distance:從字符串a變到字符串b,所需要的最少的操作步驟(插入I,刪除D,更改)為兩個字符串之間的編輯距離。這也是sam文檔中對NM這個tag的定義。編

如何高性能的 UIImageView 個圓角?

上下 mcu ask ons with contex sel rim 方案 不好的解決方案 使用下面的方式會強制Core Animation提前渲染屏幕的離屏繪制, 而離屏繪制就會給性能帶來負面影響,會有卡頓的現象出現 self.view.layer.cornerR

IE876動態添樣式時,CSS hack的BUG

node.app 更新 什麽 -i ext .com span css樣式 結果 問題描述 下面這段CSS代碼通過JS動態添加,結果會怎樣呢? .box { background: red; /* normal browsers */ *backgroun

JavaScript自動化構建工具入門----gruntgulpwebpack

cli 簡單 cpu占用率高 mini tco get %20 pan 情況 蠻荒時代的程序員: 做項目的時候,會有大量的js 大量的css 需要合並壓縮,大量時間需要用到合並壓縮 在前端開發中會出現很多重復性無意義的勞動 自動化時代的程序員: 希望一切都可以自動完