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文件是没用的，编译后会被覆盖掉