gulp編譯css不生效

Ⅰ bootstrap用gulp編譯怎麼樣

gulp在3.9版本裡面增加了對babel的支持，因此我們可以直接在gulpfile裡面使用ES6(ES2015)了。升級gulp版本首先要檢測一下我們的gulp版本，確保CLI版本及Local版本都在3.9之上:gulp-v版本如下：CLIversion3.9.0Localversion3.9.0若版本過低，我們可以通過以下方式進行升級，這里將同時升級CLI版本和Local版本：npminstallgulp-g&&npminstallgulp--save-dev安裝babel我們需要安裝babel-core及babel-preset-es2015來轉換ES6代碼：npminstallbabel-corebabel-preset-es2015--save-dev然後，創建一個.babelrc文件來使用es2015preset：touch.babelrc寫入如下內容：{"presets":["es2015"]}接下來就是使用ES6語法重寫gulpfile了。使用ES6語法重寫gulpfile首先，重命名gulpfile.js為gulpfile.babel.js，這樣gulp執行前會自動調用babel轉換文件。mvgulpfile.jsgulpfile.babel.js然後在gulpfile.babel.js裡面用ES6語法寫些內容，如下：'usestrict';importgulpfrom'gulp';importlessfrom'gulp-less';constpaths={less:'less/',dest:'build/'};gulp.task('less',()=>{gulp.src(`${paths.less}**/*.less`).pipe(less()).pipe(gulp.dest(`${paths.dest}css/`));});然後執行gulp命令：gulpless這里和原來一樣，以前的命令怎麼用現在還是怎麼用!GitHub源碼：using-es6-with-gulp

Ⅱ 怎麼用gulp把多個less編譯生成一個css

沒用過，貌似有js版的不需要後台程序編譯生成css，直接js生成，js的應該是刷新就能看到css效果。 其實沒必要用這些玩意，寫原生的css舒服得多

Ⅲ less文件編譯css，css文件為什麼是空的呢

有些軟體有插件可以實時編譯，比如sublime。

我用的是gulp，方便前端自動化。你可以網上搜一下，用起來啊很方便。

舉個例子：

java">vargulp=require('gulp');
varless=require('gulp-less');
varnotify=require('gulp-notify');
varplumber=require('gulp-plumber');
varconcat=require('gulp-concat');
varminifycss=require('gulp-minify-css');
varrename=require('gulp-rename');
varwatch=require('gulp-watch');
varuglify=require('gulp-uglify');
varautoprefixer=require('gulp-autoprefixer');
varlessPath='./src/less/*.less';
varlessMainPath='./src/less/main.less';
varlessDist='./src/css/';
varcssPath='./src/css/*.css';
varjsSrcPath='./src/js/*.js';
vardistPath='./dist/';
//編譯less
gulp.task('lessCompile',function(){
gulp.src([lessMainPath])
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(less())
.pipe(gulp.dest(lessDist));
});
//監控less文件變化
gulp.task('watchLess',function(){
gulp.watch(lessPath,['lessCompile']);
});
//css合並壓縮加前綴
gulp.task('handleCss',function(){
returngulp.src(cssPath)
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers:['last5versions','Android>=4.0'],
cascade:true,
remove:false
}))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(distPath));
});
//監控css文件變化
gulp.task('watchCss',function(){
gulp.watch(cssPath,['handleCss']);
});

Ⅳ 在伺服器上修改CSS樣式之後為什麼沒有生效是websphere 的問題還是apache的問題

檢查下是否做了CSS 的APACHE,如果做了,那就重新搞下!

Ⅳ gulp能不能將css和js打包成一個文件

Gulp解決發布線上文件(CSS和JS)緩存問題
本文的緣由：目前經常線上發布文件後要不斷的刷新頁面及過很長時間，頁面上的CSS和JS文件才能生效，特別對於目前做微信商城的時候，微信內置的瀏覽器緩存非常的嚴重，之前我們經常是在文件後面加上時間戳的方式來解決線上發布後的緩存問題，但是在微信瀏覽器內並不生效；因此我們需要改變文件名的方式來解決緩存的問題，因此使用後綴名加上MD5一連串的字元串來解決緩存的問題；
我們先可以考慮這么一個功能，我在頁面上引用css文件如下：
./css/xx.css
./js/xx.js
我現在想通過使用MD5重新命名css文件，在頁面上自動變為如下文件
./css/xx-34f3902a35.css

Ⅵ 為什麼gulp-rev-append無效

發現了同樣的問題，經過潛心研究，最終根本還是路徑的問題。

要寫成相對路徑，以Thinkphp的目錄為例，

-Application
-Home
-View
-Index
-index.html->
<linkhref="/Public/css/index.css?rev=@@hash"/>
-Public
-css
index.css

首先，Public/css/index.css的文件必須存在，而且文件路徑必須正確，因為不存在或者不被找到，肯定是不能用的。

其次，Application/Home/View/Index/index.html中的href路徑不能寫成/Public/css/index.css

要寫成

<linkhref="../../../../Public/css/index.css?rev=@@hash"/>

最後，這樣的路徑應該可以用gulp-replace插件替。

gulp.task('revchange',function(){
gulp.src('./Application/Home/View/Index/index.html')
.pipe(revAppend())
.pipe(replace('../../../../','/'))
.pipe(gulp.dest('./Application/Home/View/Index/'))；
});


註：具體根據自己的開發情況，因為生產和部署環境不像我這個在一個裡面，並不規范，但是核心在於要根據相對路徑來做，否則會失敗。

Ⅶ 為什麼 gulp testWatch 命令編譯出來的less

gulpfile.js配置如下：

//導入工具包 require('node_moles里對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
less = require('gulp-less');

//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function () {
gulp.src('src/less/*.less') //該任務針對的文件
.pipe(less()) //該任務調用的模塊
.pipe(gulp.dest('src/css')); //將會在src/css下生成index.css
});

gulp.task('default',['testLess']); //定義默認任務

//監聽預編譯文件
gulp.task('testWatch',function(){
gulp.watch('src/**/*.less',['testLess']);
});
gulp testWatch 命令編譯出來的less文件 怎麼效率沒有直接運行的less文件要快啊，編輯完less文件內容。css里不能直接反映出來，要關掉css重新打開才有。

Ⅷ 為什麼修改代碼之後 gulp build就會恢復到沒修改之前的代碼呢

這個原因可能是因為這個school.css是由css預處理器編譯出來的，你看看是不是有叫school.less或者school.scss這種類似的文件，去修改這裡面對應的圖片路徑，不然你只修改css文件是沒用的，編譯後會被覆蓋掉