使用gulp和compass结合开发项目

发表于   |   分类于   |  

现在做网站前端，都不是简单的建几个文件夹，css、js、images就完事了，连怎么建文件夹，怎么输出都是要先计划好的。一般现在都是使用gulp和grunt做自动化的，我不会grunt，但是会一点gulp。

NODEJS安装

去node.js的网站上下载一个安装包，然后按照提示确认确认，几分钟就安装好了，然后测试：

node –version

输出nodejs的版本，就说明安装成功了

安装GULP

超简单，有了nodejs，用npm安装，就一行命令：

npm install gulp -g

项目依赖库

这才是重点，开始:

npm init

根据提示，输入描述语句（可以不输入），就生成了package.json。

npm install gulp –save-dev

生成项目依赖的gulp库，必须的哦。
然后选择你要安装的gulp插件，我这边安装几个我会用到的：

npm install gulp-rename --save-dev //修改文件名
npm install gulp-uglify --save-dev //压缩js文件
npm install gulp-uglifycss --save-dev //压缩css文件
npm install gulp-imagemin --save-dev //压缩图片
npm install gulp-concat --save-dev  //合并文件

其实可以用gulp编译sass和less，但是我是比较喜欢用compass的，因为功能要强大一点，所以我就不安装gulp-sass插件了。

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^3.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.5.3",
    "gulp-uglifycss": "^1.0.6"
  },

你的package.json就变成这个样子了，然后写gulp的task，创建gulpfile.js文件：

var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var uglifycss = require('gulp-uglifycss');
var rename = require("gulp-rename");
var imagemin = require("gulp-imagemin");

gulp.task('minjs', function() {
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(rename(function(path) {
            path.basename += ".min";
        }))
        .pipe(gulp.dest('dist/js/'));
});
gulp.task('mincss', function() {
    return gulp.src('dist/css/*.css')
        .pipe(uglifycss())
        .pipe(rename(function(path) {
            path.basename += ".min";
        }))
        .pipe(gulp.dest('dist/css/'));
});
gulp.task("minimages", function() {
    return gulp.src('src/images/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('images/'))
});
gulp.task("default",function() {
    gulp.start("mincss", "minjs");
});

当在命令中使用glup时执行的是default任务，你可以可直接glup +任务名 来执行已经定义好的任务。

我的开发步骤
上面昨晚以后，我还要配置一下我的compass：

compass config
这是为了编译我写的scss，我的项目结构是这样的

  • dist //存放编译压缩后的文件
    • css
    • js
  • images //存放图片
    • icon
  • src //存放开发写的css和js
    • scss
    • js
  • views // 存放其他网页
  • vender // 存放需要的第三方插件
    • css
    • fonts
    • js
  • index.html //主页

compass配置文件生成后，按照我之前写的一篇博客一样，修改一下配置文件，比如我的修改成这个样子:

require 'compass/import-once/activate'
http_path = "/"
css_dir = "dist/css" //scss编译输出路径
sass_dir = "src/scss" //scss路径
images_dir = "images" //图片路径
javascripts_dir = "src/js" //js路径
output_style = :nested  //压缩的格式
relative_assets = true  //编译时自动修改相对路径
line_comments = false  //编译时输出注释行

基本就完成了，接下来，我就可以实战了。

首先执行我已经定义好的压缩图片任务

gulp minimages

开始做开发，监听scss文件，实时编译为css

compass watch

开发完成，压缩文件、合并文件，修改html中的脚本和样式引入路径。
gulp //因为我把压缩任务都写在了的default任务中
基本上就结束了。我只知道这么多了，以后我再慢慢学再写下来。