前端自动化构建工具_window下安装gulp

前端自动化构建工具_window下安装gulp

1、安装node.js (需要node里面的一个npm组件)

打开cmd 查看是否安装成功 输入 node -v 如果返回版本号说明安装成功

2、安装gulp

cmd —> npm install -g gulp #全局安装

3、设计目录结构

project(项目名称)
|–.git 通过git管理项目会生成这个文件夹
|–node_modules 组件目录
|–dist 发布环境
|–css 样式文件(style.css style.min.css)
|–images 图片文件(压缩图片)
|–js js文件(main.js main.min.js)
|–index.html 静态文件(压缩html)
|–src 生产环境
|–sass sass文件
|–images 图片文件
|–js js文件
|–index.html 静态文件
|–.jshintrc jshint配置文件
|–gulpfile.js gulp任务文件
4、安装 gulp 到项目(防止全局 gulp 升级后与此项目 gulpfile.js 代码不兼容)

(1)、npm install gulp –save-dev

(2)、接着安装其他依赖 gulp-sourcemaps gulp-minify-css gulp-autoprefixer gulp-less gulp-ruby-sass gulp-imagemin gulp-util –save-dev (这些就插件 gulp的组件很多)

5、选择gulp组件(根据你的需要下载不同的组件)

前端项目需要的功能:
a、图片(压缩图片支持jpg、png、gif)
b、样式 (支持sass 同时支持合并、压缩、重命名)
c、javascript (检查、合并、压缩、重命名)
d、html (压缩)
e、客户端同步刷新显示修改
f、构建项目前清除发布环境下的文件(保持发布环境的清洁)

6、安装好的组件会是在 node_modules 组件目录里

 

所需组件:

    gulp-imagemin: 压缩图片
    gulp-ruby-sass: 支持sass
    gulp-minify-css: 压缩css
    gulp-jshint: 检查js
    gulp-uglify: 压缩js
    gulp-concat: 合并文件
    less-plugin-autoprefix –save-dev   处理 css3 前缀
    gulp-rev    自动生成文件版本
    gulp-rev-collector  —gulp-rev配合gulp-rev-collector实现非覆盖式发布
    gulp-rename: 重命名文件
    gulp-htmlmin: 压缩html
    gulp-clean: 清空文件夹
    gulp-livereload: 服务器控制客户端同步刷新(需配合chrome插件LiveReload及tiny-lr)
    gulp-csslint  //
    gulp-css-spriter 将css代码中的切片图片合并成雪碧图
    gulp-livereload   自动刷新

7、编写gulpfile.js 配置文件 (这个很重要)

var gulp = require(‘gulp’),
    minifyCSS = require(‘gulp-minify-css’),  //获取gulp-minify-css模块 压缩css
    uglify = require(‘gulp-uglify’),   //压缩js
    clean = require(‘gulp-clean’),
    jshint = require(‘gulp-jshint’),
    imagemin = require(‘gulp-imagemin’),    //压缩图片
    spriter = require(‘gulp-css-spriter’),  //图片合并
    livereload = require(‘gulp-livereload’);  //自动刷新
var handleError = function (err) {
    var colors = gutil.colors;
    console.log(‘\n’)
    gutil.log(colors.red(‘Error!’))
    gutil.log(‘fileName: ‘ + colors.red(err.fileName))
    gutil.log(‘lineNumber: ‘ + colors.red(err.lineNumber))
    gutil.log(‘message: ‘ + err.message)
    gutil.log(‘plugin: ‘ + colors.yellow(err.plugin))
}
gulp.task(‘watchcss’, function() {  //注册任务
    var timestamp = +new Date();
    //需要自动合并雪碧图的样式文件
    return gulp.src(‘./src/css/style.css’)
    .pipe(spriter({
        // 生成的spriter的位置
        ‘spriteSheet’: ‘./dist/images/sprite’ + timestamp + ‘.png’,
        // 生成样式文件图片引用地址的路径
        // 如下将生产:backgound:url(../images/sprite20324232.png)
        ‘pathToSpriteSheetFromCSS’: ‘../images/sprite’ + timestamp + ‘.png’
    }))
    .pipe(minifyCSS())  //压缩文件 css
    //产出路径
    .pipe(gulp.dest(‘./dist/css’));  // 另存压缩后的文件
});
//检测JS
gulp.task(‘lintJs’, function (){
    gulp.src(‘js/.js’)
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});
//在命令使用 gulp watchjs 启动此任务
gulp.task(‘watchjs’, function () {
    gulp.watch(‘src/js/.js’, function (event) { //监听文件修改,当文件修改则执行
        var paths = watchPath(event, ‘src/‘, ‘dist/‘)
        gutil.log(gutil.colors.green(event.type) + ‘ ‘ + paths.srcPath)
        gutil.log(‘Dist ‘ + paths.distPath)
        var combined = combiner.obj([
            gulp.src(paths.srcPath),
            sourcemaps.init(),
            uglify(),
            sourcemaps.write(‘./‘),
            gulp.dest(paths.distDir)
        ])
        combined.on(‘error’, handleError)
    })
});
gulp.task(‘watchimage’, function () {
    gulp.watch(‘src/images/*’, function (event) {
        var paths = watchPath(event,’src/‘,’dist/‘)
        gutil.log(gutil.colors.green(event.type) + ‘ ‘ + paths.srcPath)
        gutil.log(‘Dist ‘ + paths.distPath)
    gulp.src(paths.srcPath)
    .pipe(imagemin({
        progressive: true
    }))
    .pipe(gulp.dest(paths.distDir))
})

})
//删除文件
gulp.task(‘clean’, function() {
return gulp.src([‘dist/css’, ‘dist/js’, ‘dist/images’], {
read: false
})
.pipe(clean());
});
//自动刷新页面
gulp.task(‘watch’, function () { // 这里的watch,是自定义的,写成live或者别的也行
var server = livereload();
// app//.的意思是 app文件夹下的 任何文件夹 的 任何文件
gulp.watch(‘src/
/.‘, function (file) {
server.changed(file.path);
});
});
var gulp = require(‘gulp’),
less = require(“gulp-less”);

gulp.task(‘compile-less’, function () {
gulp.src(‘less/*.less’)
.pipe(less())
.pipe(gulp.dest(‘dist/css’));
});
//在命令使用 gulp 启动 后面的任务
gulp.task(‘default’, [‘watchjs’, ‘lintJs’, ‘watchcss’, ‘watchimage’ ,’watch’]);

欢迎转载一起玩耍http://17wanshua.cn/的文章:一起玩耍17wanshua.cn » 前端自动化构建工具_window下安装gulp

赞 (0)
分享到: 更多

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址